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

changed to new functions
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-22 12:06:34 +02:00
parent 5a5f593025
commit 59e6d972a8
125 changed files with 1934 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/README.md
View File

@@ -61,7 +61,7 @@ It eliminates the gap between your data (Signals) and your UI components. Each c
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
| **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. |
| **Learning Curve** | **Zero** | whenyou know JS and HTML, you know SigPro-UI. |
### Semantic Functionalism
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
@@ -90,7 +90,7 @@ To achieve the performance promised by SigPro-UI, your environment must be equip
### 1. SigPro Core
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `Watch`, `Tag`, etc.) to be present in the global scope or provided as a module.
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `watch`, `h`, etc.) to be present in the global scope or provided as a module.
### 2. daisyUI v5

28
docs/components/accordion.md
View File

@@ -29,7 +29,7 @@ Collapsible accordion component for organizing content into expandable sections.
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const BasicDemo = () => {
const open1 = $(false);
@@ -54,7 +54,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Group Accordion (Radio Style)
@@ -67,7 +67,7 @@ Mount(BasicDemo, '#demo-basic');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const GroupDemo = () => {
const openSection = $('section1');
@@ -93,7 +93,7 @@ const GroupDemo = () => {
})
]);
};
Mount(GroupDemo, '#demo-group');
mount(GroupDemo, '#demo-group');
```
### Using Items Array
@@ -106,7 +106,7 @@ Mount(GroupDemo, '#demo-group');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const ItemsDemo = () => {
const openItems = $({
@@ -135,7 +135,7 @@ const ItemsDemo = () => {
]
});
};
Mount(ItemsDemo, '#demo-items');
mount(ItemsDemo, '#demo-items');
```
### FAQ Accordion
@@ -148,7 +148,7 @@ Mount(ItemsDemo, '#demo-items');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const FaqDemo = () => {
const openFaq = $('faq1');
@@ -168,7 +168,7 @@ const FaqDemo = () => {
})
));
};
Mount(FaqDemo, '#demo-faq');
mount(FaqDemo, '#demo-faq');
```
### With Rich Content
@@ -181,7 +181,7 @@ Mount(FaqDemo, '#demo-faq');
</div>
```js
const { Accordion, Div, Span, Mount } = window;
const { Accordion, Div, Span, mount } = window;
const RichDemo = () => {
const open1 = $(true);
@@ -221,7 +221,7 @@ const RichDemo = () => {
})
]);
};
Mount(RichDemo, '#demo-rich');
mount(RichDemo, '#demo-rich');
```
### Form Accordion
@@ -234,7 +234,7 @@ Mount(RichDemo, '#demo-rich');
</div>
```js
const { Accordion, Div, Span, Button, Input, Radio, Mount } = window;
const { Accordion, Div, Span, Button, Input, Radio, mount } = window;
const FormAccordion = () => {
const openStep = $('step1');
@@ -341,7 +341,7 @@ const FormAccordion = () => {
})
]);
};
Mount(FormAccordion, '#demo-form');
mount(FormAccordion, '#demo-form');
```
### All Variants
@@ -354,7 +354,7 @@ Mount(FormAccordion, '#demo-form');
</div>
```js
const { Accordion, Div, Span, Mount } = window;
const { Accordion, Div, Span, mount } = window;
const VariantsDemo = () => {
const open1 = $(true);
@@ -385,5 +385,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

24
docs/components/alert.md
View File

@@ -36,7 +36,7 @@ Alert supports all **daisyUI Alert classes**:
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const BasicDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
@@ -46,7 +46,7 @@ const BasicDemo = () => {
Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Soft vs Solid Variants
@@ -59,7 +59,7 @@ Mount(BasicDemo, '#demo-basic');
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
@@ -69,7 +69,7 @@ const VariantsDemo = () => {
Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### With Actions
@@ -82,7 +82,7 @@ Mount(VariantsDemo, '#demo-variants');
</div>
```js
const { Alert, Button, Div, Mount, Toast } = window;
const { Alert, Button, Div, mount, Toast } = window;
const ActionsDemo = () => {
const showUndo = $(false);
@@ -115,7 +115,7 @@ const ActionsDemo = () => {
]) : null
]);
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### Dismissible Alert
@@ -128,7 +128,7 @@ Mount(ActionsDemo, '#demo-actions');
</div>
```js
const { Alert, Button, Div, Mount } = window;
const { Alert, Button, Div, mount } = window;
const DismissibleDemo = () => {
const visible = $(true);
@@ -141,7 +141,7 @@ const DismissibleDemo = () => {
() => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
]);
};
Mount(DismissibleDemo, '#demo-dismissible');
mount(DismissibleDemo, '#demo-dismissible');
```
### Reactive Alert
@@ -154,7 +154,7 @@ Mount(DismissibleDemo, '#demo-dismissible');
</div>
```js
const { Alert, Div, Input, Mount } = window;
const { Alert, Div, Input, mount } = window;
const ReactiveDemo = () => {
const email = $('');
@@ -180,7 +180,7 @@ const ReactiveDemo = () => {
() => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### All Types
@@ -193,7 +193,7 @@ Mount(ReactiveDemo, '#demo-reactive');
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const AllTypesDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
@@ -203,5 +203,5 @@ const AllTypesDemo = () => {
Alert({ class: 'alert-error' }, '❌ This is an error alert')
]);
};
Mount(AllTypesDemo, '#demo-all');
mount(AllTypesDemo, '#demo-all');
```

20
docs/components/autocomplete.md
View File

@@ -41,7 +41,7 @@ Autocomplete wraps a **daisyUI Input component** internally. All Input styling c
</div>
```js
const { Autocomplete, Mount } = window;
const { Autocomplete, mount } = window;
const BasicDemo = () => {
const selected = $("");
@@ -62,7 +62,7 @@ const BasicDemo = () => {
onselect: (value) => selected(value),
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Objects
@@ -75,7 +75,7 @@ Mount(BasicDemo, "#demo-basic");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const ObjectsDemo = () => {
const selected = $("");
@@ -109,7 +109,7 @@ const ObjectsDemo = () => {
),
]);
};
Mount(ObjectsDemo, "#demo-objects");
mount(ObjectsDemo, "#demo-objects");
```
### With Reactive Display
@@ -122,7 +122,7 @@ Mount(ObjectsDemo, "#demo-objects");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const ReactiveDemo = () => {
const selected = $("");
@@ -155,7 +155,7 @@ const ReactiveDemo = () => {
: null,
]);
};
Mount(ReactiveDemo, "#demo-reactive");
mount(ReactiveDemo, "#demo-reactive");
```
### Dynamic Items
@@ -168,7 +168,7 @@ Mount(ReactiveDemo, "#demo-reactive");
</div>
```js
const { Autocomplete, Select, SelectItems, Div, Mount } = window;
const { Autocomplete, Select, SelectItems, Div, mount } = window;
const DynamicDemo = () => {
const selected = $("");
@@ -219,7 +219,7 @@ const DynamicDemo = () => {
]),
]);
};
Mount(DynamicDemo, "#demo-dynamic");
mount(DynamicDemo, "#demo-dynamic");
```
### All Variants
@@ -232,7 +232,7 @@ Mount(DynamicDemo, "#demo-dynamic");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const VariantsDemo = () => {
const colors = [
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
}),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```

20
docs/components/badge.md
View File

@@ -56,7 +56,7 @@ const BasicDemo = () => {
Badge({ class: 'badge-error' }, 'Error')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Badge Sizes
@@ -78,7 +78,7 @@ const SizesDemo = () => {
Badge({ class: 'badge-lg' }, 'Large')
]);
};
Mount(SizesDemo, '#demo-sizes');
mount(SizesDemo, '#demo-sizes');
```
### Outline Badges
@@ -103,7 +103,7 @@ const OutlineDemo = () => {
Badge({ class: 'badge-outline badge-error' }, 'Error')
]);
};
Mount(OutlineDemo, '#demo-outline');
mount(OutlineDemo, '#demo-outline');
```
### Ghost Badges
@@ -128,7 +128,7 @@ const GhostDemo = () => {
Badge({ class: 'badge-ghost badge-error' }, 'Error')
]);
};
Mount(GhostDemo, '#demo-ghost');
mount(GhostDemo, '#demo-ghost');
```
### With Icons
@@ -165,7 +165,7 @@ const IconsDemo = () => {
])
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Status Badges
@@ -194,7 +194,7 @@ const StatusDemo = () => {
))
]);
};
Mount(StatusDemo, '#demo-status');
mount(StatusDemo, '#demo-status');
```
### Count Badges
@@ -227,7 +227,7 @@ const CountDemo = () => {
])
]);
};
Mount(CountDemo, '#demo-count');
mount(CountDemo, '#demo-count');
```
### Interactive Badge
@@ -255,7 +255,7 @@ const InteractiveDemo = () => {
}, 'Reset')
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### All Variants
@@ -287,7 +287,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Inline with Text
@@ -319,5 +319,5 @@ const InlineDemo = () => {
])
]);
};
Mount(InlineDemo, '#demo-inline');
mount(InlineDemo, '#demo-inline');
```

16
docs/components/button.md
View File

@@ -48,7 +48,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me");
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Loading State
@@ -69,10 +69,10 @@ const LoadingDemo = () => {
isSaving(false);
},
},
[If(isSaving, ()=>Loading()), "Save Changes"],
[when(isSaving, ()=>Loading()), "Save Changes"],
);
};
Mount(LoadingDemo, "#demo-loading");
mount(LoadingDemo, "#demo-loading");
```
### With Icon
@@ -85,7 +85,7 @@ const IconDemo = () => {
Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
]);
};
Mount(IconDemo, "#demo-icon");
mount(IconDemo, "#demo-icon");
```
### With Badge (using Indicator)
@@ -99,7 +99,7 @@ const BadgeDemo = () => {
Button({ class: "btn-outline" }, "Notifications"),
);
};
Mount(BadgeDemo, "#demo-badge");
mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
Button({ class: "btn-ghost" }, "Delete"),
);
};
Mount(TooltipDemo, "#demo-tooltip");
mount(TooltipDemo, "#demo-tooltip");
```
### Combined (Badge + Tooltip)
@@ -137,7 +137,7 @@ const CombinedDemo = () => {
),
);
};
Mount(CombinedDemo, "#demo-combined");
mount(CombinedDemo, "#demo-combined");
```
### All Color Variants
@@ -155,5 +155,5 @@ const VariantsDemo = () => {
Button({ class: "btn-disabled" }, "Disabled"),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```

14
docs/components/checkbox.md
View File

@@ -61,7 +61,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted())
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Toggle Switch
@@ -89,7 +89,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
Mount(ToggleDemo, '#demo-toggle');
mount(ToggleDemo, '#demo-toggle');
```
### Disabled State
@@ -116,7 +116,7 @@ const DisabledDemo = () => {
})
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Multiple Selection
@@ -169,7 +169,7 @@ const MultipleDemo = () => {
})
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### With Tooltip
@@ -195,7 +195,7 @@ const TooltipDemo = () => {
})
);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### All Variants
@@ -244,7 +244,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Form Example
@@ -288,5 +288,5 @@ const FormDemo = () => {
: null
]);
};
Mount(FormDemo, '#demo-form');
mount(FormDemo, '#demo-form');
```

12
docs/components/colorpicker.md
View File

@@ -45,7 +45,7 @@ const BasicDemo = () => {
value: color
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Preview
@@ -74,7 +74,7 @@ const PreviewDemo = () => {
])
]);
};
Mount(PreviewDemo, '#demo-preview');
mount(PreviewDemo, '#demo-preview');
```
### Color Palette Grid
@@ -112,7 +112,7 @@ const PaletteDemo = () => {
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
Mount(PaletteDemo, '#demo-palette');
mount(PaletteDemo, '#demo-palette');
```
### With Text Color Preview
@@ -148,7 +148,7 @@ const TextDemo = () => {
])
]);
};
Mount(TextDemo, '#demo-text');
mount(TextDemo, '#demo-text');
```
### All Variants
@@ -181,7 +181,7 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Dynamic Color Swatch
@@ -221,5 +221,5 @@ const DynamicDemo = () => {
])
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```

12
docs/components/datepicker.md
View File

@@ -50,7 +50,7 @@ const BasicDemo = () => {
placeholder: 'Choose a date...'
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Date Range Picker
@@ -78,7 +78,7 @@ const RangeDemo = () => {
]) : null
]);
};
Mount(RangeDemo, '#demo-range');
mount(RangeDemo, '#demo-range');
```
### With Time Selection
@@ -106,7 +106,7 @@ const TimeDemo = () => {
]) : null
]);
};
Mount(TimeDemo, '#demo-time');
mount(TimeDemo, '#demo-time');
```
### Range with Time
@@ -135,7 +135,7 @@ const RangeTimeDemo = () => {
]) : null
]);
};
Mount(RangeTimeDemo, '#demo-range-time');
mount(RangeTimeDemo, '#demo-range-time');
```
### Reactive Display
@@ -167,7 +167,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### All Variants
@@ -201,5 +201,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/drawer.md
View File

@@ -61,7 +61,7 @@ const BasicDemo = () => {
])
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Navigation Drawer
@@ -138,7 +138,7 @@ const NavDrawer = () => {
])
});
};
Mount(NavDrawer, '#demo-nav');
mount(NavDrawer, '#demo-nav');
```
### Settings Drawer
@@ -233,7 +233,7 @@ const SettingsDrawer = () => {
])
});
};
Mount(SettingsDrawer, '#demo-settings');
mount(SettingsDrawer, '#demo-settings');
```
### Cart Drawer
@@ -336,7 +336,7 @@ const CartDrawer = () => {
])
});
};
Mount(CartDrawer, '#demo-cart');
mount(CartDrawer, '#demo-cart');
```
### Responsive Drawer
@@ -404,7 +404,7 @@ const ResponsiveDrawer = () => {
])
});
};
Mount(ResponsiveDrawer, '#demo-responsive');
mount(ResponsiveDrawer, '#demo-responsive');
```
### Form Drawer
@@ -462,7 +462,7 @@ const FormDrawer = () => {
}),
Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'),
Tag('textarea', {
h('textarea', {
class: 'textarea textarea-bordered h-24',
placeholder: 'Your message',
value: message,
@@ -489,5 +489,5 @@ const FormDrawer = () => {
])
});
};
Mount(FormDrawer, '#demo-form');
mount(FormDrawer, '#demo-form');
```

14
docs/components/dropdown.md
View File

@@ -71,7 +71,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -96,7 +96,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Action Dropdown
@@ -124,7 +124,7 @@ const ActionsDemo = () => {
]
});
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### User Dropdown
@@ -153,7 +153,7 @@ const UserDropdown = () => {
]
});
};
Mount(UserDropdown, '#demo-user');
mount(UserDropdown, '#demo-user');
```
### Reactive Items
@@ -180,7 +180,7 @@ const ReactiveDropdown = () => {
items: items
});
};
Mount(ReactiveDropdown, '#demo-reactive');
mount(ReactiveDropdown, '#demo-reactive');
```
### Notification Dropdown
@@ -225,7 +225,7 @@ const NotificationsDropdown = () => {
});
};
Mount(NotificationsDropdown, '#demo-notifications');
mount(NotificationsDropdown, '#demo-notifications');
```
### All Variants
@@ -251,5 +251,5 @@ const VariantsDemo = () => {
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

16
docs/components/fab.md
View File

@@ -75,7 +75,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Label
@@ -101,7 +101,7 @@ const LabelDemo = () => {
})
]);
};
Mount(LabelDemo, '#demo-label');
mount(LabelDemo, '#demo-label');
```
### Different Positions
@@ -145,7 +145,7 @@ const PositionsDemo = () => {
})
]);
};
Mount(PositionsDemo, '#demo-positions');
mount(PositionsDemo, '#demo-positions');
```
### Color Variants
@@ -190,7 +190,7 @@ const ColorsDemo = () => {
})
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### Reactive Actions
@@ -236,7 +236,7 @@ const ReactiveActions = () => {
})
]);
};
Mount(ReactiveActions, '#demo-reactive');
mount(ReactiveActions, '#demo-reactive');
```
### Document Actions
@@ -275,7 +275,7 @@ const DocumentActions = () => {
})
]);
};
Mount(DocumentActions, '#demo-document');
mount(DocumentActions, '#demo-document');
```
### Messaging FAB
@@ -333,7 +333,7 @@ const MessagingFAB = () => {
})
]);
};
Mount(MessagingFAB, '#demo-messaging');
mount(MessagingFAB, '#demo-messaging');
```
### All Variants
@@ -374,5 +374,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/fieldset.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Legend
@@ -104,7 +104,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Address Form
@@ -146,7 +146,7 @@ const AddressDemo = () => {
])
]);
};
Mount(AddressDemo, '#demo-address');
mount(AddressDemo, '#demo-address');
```
### Payment Method
@@ -187,7 +187,7 @@ const PaymentDemo = () => {
])
]);
};
Mount(PaymentDemo, '#demo-payment');
mount(PaymentDemo, '#demo-payment');
```
### Preferences Panel
@@ -236,7 +236,7 @@ const PreferencesDemo = () => {
])
]);
};
Mount(PreferencesDemo, '#demo-preferences');
mount(PreferencesDemo, '#demo-preferences');
```
### Registration Form
@@ -294,7 +294,7 @@ const RegistrationDemo = () => {
])
]);
};
Mount(RegistrationDemo, '#demo-registration');
mount(RegistrationDemo, '#demo-registration');
```
### All Variants
@@ -320,5 +320,5 @@ const VariantsDemo = () => {
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

12
docs/components/indicator.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Online Status Indicator
@@ -91,7 +91,7 @@ const StatusDemo = () => {
)
]);
};
Mount(StatusDemo, '#demo-status');
mount(StatusDemo, '#demo-status');
```
### Reactive Counter
@@ -129,7 +129,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Shopping Cart
@@ -188,7 +188,7 @@ const CartDemo = () => {
]);
};
Mount(CartDemo, '#demo-cart');
mount(CartDemo, '#demo-cart');
```
### Email Inbox
@@ -249,7 +249,7 @@ const InboxDemo = () => {
]);
};
Mount(InboxDemo, '#demo-inbox');
mount(InboxDemo, '#demo-inbox');
```
### All Variants
@@ -280,5 +280,5 @@ const VariantsDemo = () => {
)
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

38
docs/components/input.md
View File

@@ -39,7 +39,7 @@ Input supports all **daisyUI Input classes**:
</div>
```js
const { Input, Mount } = window;
const { Input, mount } = window;
const BasicDemo = () => {
const name = $("");
@@ -49,7 +49,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value)
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Icon
@@ -64,13 +64,13 @@ Wrap the input inside a `Div` with class `input` and add an icon as a sibling.
</div>
```js
const { InputLabel, Div, Icon, Mount } = window;
const { InputLabel, Div, Icon, mount } = window;
const IconDemo = () => {
const email = $("");
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("✉️"),
Tag("input", {
h("input", {
class: "grow",
type: "email",
value: email,
@@ -79,7 +79,7 @@ const IconDemo = () => {
})
]);
};
Mount(IconDemo, "#demo-icon");
mount(IconDemo, "#demo-icon");
```
### Password with Toggle
@@ -92,14 +92,14 @@ Mount(IconDemo, "#demo-icon");
</div>
```js
const { Input, Div, Icon, Swap, Mount } = window;
const { Input, Div, Icon, Swap, mount } = window;
const PasswordDemo = () => {
const password = $("");
const visible = $(false);
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("icon-[lucide--lock]"),
Tag("input", {
h("input", {
type: () => (visible() ? "text" : "password"),
value: password,
placeholder: "Password",
@@ -114,7 +114,7 @@ const PasswordDemo = () => {
})
]);
};
Mount(PasswordDemo, "#demo-password");
mount(PasswordDemo, "#demo-password");
```
### With Floating Label
@@ -129,7 +129,7 @@ Use a wrapper `Div` with class `floating-label`.
</div>
```js
const { Input, Div, Span, Mount } = window;
const { Input, Div, Span, mount } = window;
const LabelDemo = () => {
const email = $("");
@@ -143,7 +143,7 @@ const LabelDemo = () => {
})
]);
};
Mount(LabelDemo, "#demo-label");
mount(LabelDemo, "#demo-label");
```
### With Tooltip
@@ -158,7 +158,7 @@ Wrap the input with `Tooltip` component.
</div>
```js
const { Input, Tooltip, Mount } = window;
const { Input, Tooltip, mount } = window;
const TooltipDemo = () => {
const username = $("");
@@ -170,7 +170,7 @@ const TooltipDemo = () => {
})
]);
};
Mount(TooltipDemo, "#demo-tooltip");
mount(TooltipDemo, "#demo-tooltip");
```
### Error State
@@ -185,13 +185,13 @@ Add `input-error` class and show a validation message.
</div>
```js
const { Input, Div, Mount } = window;
const { Input, Div, mount } = window;
const ErrorDemo = () => {
const email = $("");
const isValid = () => email().includes("@");
return Div({ class: "flex flex-col gap-2" }, [
Tag("input", {
h("input", {
type: "email",
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
value: email,
@@ -201,7 +201,7 @@ const ErrorDemo = () => {
() => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null
]);
};
Mount(ErrorDemo, "#demo-error");
mount(ErrorDemo, "#demo-error");
```
### Disabled State
@@ -214,12 +214,12 @@ Mount(ErrorDemo, "#demo-error");
</div>
```js
const { Input, Mount } = window;
const { Input, mount } = window;
const DisabledDemo = () => {
return Input({ value: "john.doe", disabled: true });
};
Mount(DisabledDemo, "#demo-disabled");
mount(DisabledDemo, "#demo-disabled");
```
### All Variants
@@ -232,7 +232,7 @@ Mount(DisabledDemo, "#demo-disabled");
</div>
```js
const { Input, Div, Mount } = window;
const { Input, Div, mount } = window;
const VariantsDemo = () => {
const text = $("");
@@ -250,5 +250,5 @@ const VariantsDemo = () => {
Input({ type: "date", value: $("2024-01-01") })
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```

18
docs/components/list.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
]),
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Header
@@ -90,7 +90,7 @@ const HeaderDemo = () => {
]),
});
};
Mount(HeaderDemo, "#demo-header");
mount(HeaderDemo, "#demo-header");
```
### With Icons
@@ -134,7 +134,7 @@ const IconsDemo = () => {
),
});
};
Mount(IconsDemo, "#demo-icons");
mount(IconsDemo, "#demo-icons");
```
### With Badges
@@ -194,7 +194,7 @@ const BadgesDemo = () => {
),
});
};
Mount(BadgesDemo, "#demo-badges");
mount(BadgesDemo, "#demo-badges");
```
### Interactive List
@@ -252,7 +252,7 @@ const InteractiveDemo = () => {
: Div({ class: "alert alert-soft" }, "Select a project to see details"),
]);
};
Mount(InteractiveDemo, "#demo-interactive");
mount(InteractiveDemo, "#demo-interactive");
```
### Reactive List (Todo App)
@@ -291,7 +291,7 @@ const ReactiveDemo = () => {
};
const pendingCount = () => todos().filter(t => !t.done).length;
Watch(()=> console.log(pendingCount()));
watch(()=> console.log(pendingCount()));
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-2' }, [
Input({
@@ -330,7 +330,7 @@ const ReactiveDemo = () => {
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Avatar List
@@ -383,7 +383,7 @@ const AvatarDemo = () => {
]),
});
};
Mount(AvatarDemo, "#demo-avatar");
mount(AvatarDemo, "#demo-avatar");
```
### All Variants
@@ -421,5 +421,5 @@ const VariantsDemo = () => {
}),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```

16
docs/components/menu.md
View File

@@ -72,7 +72,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -117,7 +117,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Nested Menu
@@ -187,7 +187,7 @@ const NestedDemo = () => {
]
});
};
Mount(NestedDemo, '#demo-nested');
mount(NestedDemo, '#demo-nested');
```
### Horizontal Menu
@@ -232,7 +232,7 @@ const HorizontalDemo = () => {
]
});
};
Mount(HorizontalDemo, '#demo-horizontal');
mount(HorizontalDemo, '#demo-horizontal');
```
### Sidebar Menu
@@ -295,7 +295,7 @@ const SidebarDemo = () => {
])
]);
};
Mount(SidebarDemo, '#demo-sidebar');
mount(SidebarDemo, '#demo-sidebar');
```
### Account Menu
@@ -346,7 +346,7 @@ const AccountDemo = () => {
]
});
};
Mount(AccountDemo, '#demo-account');
mount(AccountDemo, '#demo-account');
```
### Collapsible Sidebar
@@ -384,7 +384,7 @@ const CollapsibleDemo = () => {
])
]);
};
Mount(CollapsibleDemo, '#demo-collapsible');
mount(CollapsibleDemo, '#demo-collapsible');
```
### All Variants
@@ -422,5 +422,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/modal.md
View File

@@ -63,7 +63,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
@@ -130,7 +130,7 @@ const ActionsDemo = () => {
])
]);
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### Form Modal
@@ -199,7 +199,7 @@ const FormModal = () => {
])
]);
};
Mount(FormModal, '#demo-form');
mount(FormModal, '#demo-form');
```
### Confirmation Modal
@@ -260,7 +260,7 @@ const ConfirmDemo = () => {
])
]);
};
Mount(ConfirmDemo, '#demo-confirm');
mount(ConfirmDemo, '#demo-confirm');
```
### Large Content Modal
@@ -312,7 +312,7 @@ const LargeDemo = () => {
])
]);
};
Mount(LargeDemo, '#demo-large');
mount(LargeDemo, '#demo-large');
```
### Multiple Modals
@@ -354,7 +354,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.')
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### Custom Styled Modal
@@ -391,5 +391,5 @@ const CustomDemo = () => {
])
]);
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```

14
docs/components/navbar.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Navigation Links
@@ -92,7 +92,7 @@ const LinksDemo = () => {
])
]);
};
Mount(LinksDemo, '#demo-links');
mount(LinksDemo, '#demo-links');
```
### With Search
@@ -128,7 +128,7 @@ const SearchDemo = () => {
])
]);
};
Mount(SearchDemo, '#demo-search');
mount(SearchDemo, '#demo-search');
```
### With Avatar and Dropdown
@@ -167,7 +167,7 @@ const AvatarDemo = () => {
])
]);
};
Mount(AvatarDemo, '#demo-avatar');
mount(AvatarDemo, '#demo-avatar');
```
### Responsive Navbar
@@ -206,7 +206,7 @@ const ResponsiveDemo = () => {
]) : null
]);
};
Mount(ResponsiveDemo, '#demo-responsive');
mount(ResponsiveDemo, '#demo-responsive');
```
### With Brand and Actions
@@ -237,7 +237,7 @@ const BrandDemo = () => {
])
]);
};
Mount(BrandDemo, '#demo-brand');
mount(BrandDemo, '#demo-brand');
```
### All Variants
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/radio.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -105,7 +105,7 @@ const TooltipDemo = () => {
})
]);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -139,7 +139,7 @@ const DisabledDemo = () => {
})
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Preview
@@ -199,7 +199,7 @@ const ReactiveDemo = () => {
}, () => `${size()} ${color()} preview`)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Payment Method Selection
@@ -250,7 +250,7 @@ const PaymentDemo = () => {
})
]);
};
Mount(PaymentDemo, '#demo-payment');
mount(PaymentDemo, '#demo-payment');
```
### All Variants
@@ -334,7 +334,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Dynamic Options
@@ -405,5 +405,5 @@ const DynamicDemo = () => {
: null
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```

14
docs/components/range.md
View File

@@ -57,7 +57,7 @@ const BasicDemo = () => {
Div({ class: 'text-center' }, () => `Value: ${value()}%`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -85,7 +85,7 @@ const TooltipDemo = () => {
Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
]);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### Color Variants
@@ -109,7 +109,7 @@ const ColorsDemo = () => {
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### Size Variants
@@ -135,7 +135,7 @@ const SizesDemo = () => {
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
]);
};
Mount(SizesDemo, '#demo-sizes');
mount(SizesDemo, '#demo-sizes');
```
### Price Range
@@ -173,7 +173,7 @@ const PriceDemo = () => {
})
]);
};
Mount(PriceDemo, '#demo-price');
mount(PriceDemo, '#demo-price');
```
### Audio Controls
@@ -227,7 +227,7 @@ const AudioDemo = () => {
])
]);
};
Mount(AudioDemo, '#demo-audio');
mount(AudioDemo, '#demo-audio');
```
### All Variants
@@ -254,5 +254,5 @@ const VariantsDemo = () => {
Range({ disabled: true, value: $(50), oninput: (e) => {} })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/rating.md
View File

@@ -54,7 +54,7 @@ const BasicDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Heart Rating
@@ -80,7 +80,7 @@ const HeartDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
Mount(HeartDemo, '#demo-heart');
mount(HeartDemo, '#demo-heart');
```
### Star with Outline
@@ -106,7 +106,7 @@ const Star2Demo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
Mount(Star2Demo, '#demo-star2');
mount(Star2Demo, '#demo-star2');
```
### Read-only Rating
@@ -131,7 +131,7 @@ const ReadonlyDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
Mount(ReadonlyDemo, '#demo-readonly');
mount(ReadonlyDemo, '#demo-readonly');
```
### Product Review
@@ -186,7 +186,7 @@ const ReviewDemo = () => {
])
]);
};
Mount(ReviewDemo, '#demo-review');
mount(ReviewDemo, '#demo-review');
```
### All Variants
@@ -219,7 +219,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Interactive Feedback
@@ -268,5 +268,5 @@ const FeedbackDemo = () => {
: null
]);
};
Mount(FeedbackDemo, '#demo-feedback');
mount(FeedbackDemo, '#demo-feedback');
```

10
docs/components/select.md
View File

@@ -67,7 +67,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Display
@@ -102,7 +102,7 @@ const ReactiveDemo = () => {
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Disabled State
@@ -133,7 +133,7 @@ const DisabledDemo = () => {
])
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Dynamic Items
@@ -195,7 +195,7 @@ const DynamicDemo = () => {
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -263,5 +263,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

16
docs/components/stack.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Card Stack
@@ -73,7 +73,7 @@ const CardsDemo = () => {
])
]);
};
Mount(CardsDemo, '#demo-cards');
mount(CardsDemo, '#demo-cards');
```
### Avatar Stack
@@ -99,7 +99,7 @@ const AvatarsDemo = () => {
])
]);
};
Mount(AvatarsDemo, '#demo-avatars');
mount(AvatarsDemo, '#demo-avatars');
```
### Image Stack
@@ -125,7 +125,7 @@ const ImagesDemo = () => {
])
]);
};
Mount(ImagesDemo, '#demo-images');
mount(ImagesDemo, '#demo-images');
```
### Photo Gallery Stack
@@ -157,7 +157,7 @@ const GalleryDemo = () => {
)
]);
};
Mount(GalleryDemo, '#demo-gallery');
mount(GalleryDemo, '#demo-gallery');
```
### Interactive Stack
@@ -197,7 +197,7 @@ const InteractiveDemo = () => {
])
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Notification Stack
@@ -249,7 +249,7 @@ const NotificationsDemo = () => {
}, 'Clear All')
]);
};
Mount(NotificationsDemo, '#demo-notifications');
mount(NotificationsDemo, '#demo-notifications');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

14
docs/components/stat.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -94,7 +94,7 @@ const IconsDemo = () => {
})
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Reactive Values
@@ -137,7 +137,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Multiple Stats in Row
@@ -178,7 +178,7 @@ const MultipleDemo = () => {
})
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### Dashboard Example
@@ -243,7 +243,7 @@ const DashboardDemo = () => {
])
]);
};
Mount(DashboardDemo, '#demo-dashboard');
mount(DashboardDemo, '#demo-dashboard');
```
### All Variants
@@ -288,7 +288,7 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Compact Stats
@@ -325,5 +325,5 @@ const CompactDemo = () => {
})
]);
};
Mount(CompactDemo, '#demo-compact');
mount(CompactDemo, '#demo-compact');
```

16
docs/components/swap.md
View File

@@ -49,7 +49,7 @@ const BasicDemo = () => {
off: "💫 OFF"
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Icon Swap
@@ -71,7 +71,7 @@ const IconsDemo = () => {
off: "👁️‍🗨️"
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Emoji Swap
@@ -93,7 +93,7 @@ const EmojiDemo = () => {
off: "🖤"
});
};
Mount(EmojiDemo, '#demo-emoji');
mount(EmojiDemo, '#demo-emoji');
```
### Custom Content Swap
@@ -115,7 +115,7 @@ const CustomDemo = () => {
off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
});
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### With Reactive State
@@ -144,7 +144,7 @@ const ReactiveDemo = () => {
)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Toggle Mode Swap
@@ -192,7 +192,7 @@ const ModeDemo = () => {
])
]);
};
Mount(ModeDemo, '#demo-mode');
mount(ModeDemo, '#demo-mode');
```
### All Variants
@@ -241,7 +241,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Simple Todo Toggle
@@ -279,5 +279,5 @@ const TodoDemo = () => {
})
]);
};
Mount(TodoDemo, '#demo-todo');
mount(TodoDemo, '#demo-todo');
```

16
docs/components/table.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Zebra Stripes
@@ -101,7 +101,7 @@ const ZebraDemo = () => {
zebra: true
});
};
Mount(ZebraDemo, '#demo-zebra');
mount(ZebraDemo, '#demo-zebra');
```
### With Custom Cell Rendering
@@ -147,7 +147,7 @@ const CustomDemo = () => {
zebra: true
});
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### With Footers
@@ -195,7 +195,7 @@ const FooterDemo = () => {
zebra: true
});
};
Mount(FooterDemo, '#demo-footer');
mount(FooterDemo, '#demo-footer');
```
### Empty State
@@ -223,7 +223,7 @@ const EmptyDemo = () => {
])
});
};
Mount(EmptyDemo, '#demo-empty');
mount(EmptyDemo, '#demo-empty');
```
### Reactive Data
@@ -294,7 +294,7 @@ const ReactiveDemo = () => {
})
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### With Actions
@@ -354,7 +354,7 @@ const ActionsDemo = () => {
zebra: true
});
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### All Variants
@@ -408,5 +408,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

16
docs/components/tabs.md
View File

@@ -87,7 +87,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -126,7 +126,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### With Tooltips
@@ -168,7 +168,7 @@ const TooltipsDemo = () => {
]
});
};
Mount(TooltipsDemo, '#demo-tooltips');
mount(TooltipsDemo, '#demo-tooltips');
```
### Disabled Tab
@@ -207,7 +207,7 @@ const DisabledDemo = () => {
]
});
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Content
@@ -253,7 +253,7 @@ const ReactiveDemo = () => {
]
});
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Form Tabs
@@ -355,7 +355,7 @@ const FormTabs = () => {
])
]);
};
Mount(FormTabs, '#demo-form');
mount(FormTabs, '#demo-form');
```
### All Variants
@@ -415,7 +415,7 @@ const VariantsDemo = () => {
Tabs({ items: createItems(active4), class: 'tabs-border' })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Closable Tabs
@@ -452,5 +452,5 @@ const ClosableTabsDemo = () => {
]);
};
Mount(ClosableTabsDemo, '#demo-closable');
mount(ClosableTabsDemo, '#demo-closable');
```

16
docs/components/timeline.md
View File

@@ -60,7 +60,7 @@ const BasicDemo = () => {
return Timeline({ items: events });
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Horizontal Timeline
@@ -88,7 +88,7 @@ const HorizontalDemo = () => {
class: 'min-w-[600px]'
});
};
Mount(HorizontalDemo, '#demo-horizontal');
mount(HorizontalDemo, '#demo-horizontal');
```
### Compact Timeline
@@ -114,7 +114,7 @@ const CompactDemo = () => {
compact: true
});
};
Mount(CompactDemo, '#demo-compact');
mount(CompactDemo, '#demo-compact');
```
### Custom Icons
@@ -137,7 +137,7 @@ const IconsDemo = () => {
return Timeline({ items: milestones });
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Reactive Timeline
@@ -192,7 +192,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Order Status Tracker
@@ -234,7 +234,7 @@ const OrderDemo = () => {
))
]);
};
Mount(OrderDemo, '#demo-order');
mount(OrderDemo, '#demo-order');
```
### Company History
@@ -259,7 +259,7 @@ const HistoryDemo = () => {
return Timeline({ items: milestones });
};
Mount(HistoryDemo, '#demo-history');
mount(HistoryDemo, '#demo-history');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
Timeline({ items: sampleItems, compact: true })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```

16
docs/components/toast.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
}, 'Error Toast')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Different Durations
@@ -77,7 +77,7 @@ const DurationDemo = () => {
}, '8 Seconds')
]);
};
Mount(DurationDemo, '#demo-duration');
mount(DurationDemo, '#demo-duration');
```
### Interactive Toast
@@ -115,7 +115,7 @@ const InteractiveDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Form Validation Toast
@@ -174,7 +174,7 @@ const FormToastDemo = () => {
}, 'Login')
]);
};
Mount(FormToastDemo, '#demo-form');
mount(FormToastDemo, '#demo-form');
```
### Success Feedback
@@ -227,7 +227,7 @@ const FeedbackDemo = () => {
))
]);
};
Mount(FeedbackDemo, '#demo-feedback');
mount(FeedbackDemo, '#demo-feedback');
```
### Error Handling
@@ -274,7 +274,7 @@ const ErrorDemo = () => {
}, 'Timeout')
]);
};
Mount(ErrorDemo, '#demo-error');
mount(ErrorDemo, '#demo-error');
```
### Custom Messages
@@ -311,7 +311,7 @@ const CustomDemo = () => {
}, 'Security Alert')
]);
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### Multiple Toasts
@@ -339,5 +339,5 @@ const MultipleDemo = () => {
}, 'Show Multiple Toasts')
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```

16
docs/components/tooltip.md
View File

@@ -58,7 +58,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Tooltip Positions
@@ -87,7 +87,7 @@ const PositionsDemo = () => {
])
]);
};
Mount(PositionsDemo, '#demo-positions');
mount(PositionsDemo, '#demo-positions');
```
### Tooltip with Icons
@@ -116,7 +116,7 @@ const IconsDemo = () => {
])
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Form Field Tooltips
@@ -159,7 +159,7 @@ const FormDemo = () => {
])
]);
};
Mount(FormDemo, '#demo-form');
mount(FormDemo, '#demo-form');
```
### Interactive Tooltip
@@ -201,7 +201,7 @@ const InteractiveDemo = () => {
])
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Rich Tooltip Content
@@ -240,7 +240,7 @@ const RichDemo = () => {
])
]);
};
Mount(RichDemo, '#demo-rich');
mount(RichDemo, '#demo-rich');
```
### Color Variants
@@ -278,7 +278,7 @@ const ColorsDemo = () => {
])
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### All Tooltip Positions
@@ -315,5 +315,5 @@ const AllPositionsDemo = () => {
])
]);
};
Mount(AllPositionsDemo, '#demo-all-positions');
mount(AllPositionsDemo, '#demo-all-positions');
```

30
docs/install.md
View File

@@ -23,15 +23,15 @@ npm install sigpro-ui
```javascript
// Import everything from sigpro-ui (includes sigpro core)
import { $, Mount, Button, Alert, Input, tt } from "sigpro-ui";
import { $, mount, Button, Alert, Input, tt } from "sigpro-ui";
import "sigpro-ui/css";
// Create your app
const App = () => {
const count = $(0);
return Tag('div', { class: 'p-8 max-w-md mx-auto' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return h('div', { class: 'p-8 max-w-md mx-auto' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
placeholder: 'Enter your name...'
@@ -49,8 +49,8 @@ const App = () => {
]);
};
// Mount your app
Mount(App, "#app");
// mount your app
mount(App, "#app");
```
### CDN Usage (no build step)
@@ -77,14 +77,14 @@ Simply add the script tag and start using SigProUI:
// All functions are available directly in window
// No need to import anything!
const { $, Mount, Button, Input, Alert } = window;
const { $, mount, Button, Input, Alert } = window;
const App = () => {
const name = $('');
const count = $(0);
return Tag('div', { class: 'max-w-md mx-auto p-4' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return h('div', { class: 'max-w-md mx-auto p-4' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
value: name,
@@ -103,7 +103,7 @@ Simply add the script tag and start using SigProUI:
]);
};
Mount(App, '#app');
mount(App, '#app');
</script>
</body>
</html>
@@ -115,12 +115,12 @@ When you install SigProUI, you get:
### SigPro Core Functions
- `$()` - Reactive signals
- `Watch()` - Watch reactive dependencies
- `Tag()` - Create HTML elements with reactivity
- `If()` - Conditional rendering
- `For()` - List rendering
- `Router()` - Hash-based routing
- `Mount()` - Mount components to DOM
- `watch()` - watch reactive dependencies
- `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering
- `each()` - List rendering
- `router()` - Hash-based routing
- `mount()` - mount components to DOM
>For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/)

4
docs/quick.md
View File

@@ -184,14 +184,14 @@ Input({
const userId = $("123");
const userData = $(null);
Watch(userId, async (id) => {
watch(userId, async (id) => {
loading(true);
userData(await fetch(`/api/user/${id}`).then(r => r.json()));
loading(false);
});
// In template
If(() => userData(), () => Alert({ type: "success" }, userData()?.name))
when(() => userData(), () => Alert({ type: "success" }, userData()?.name))
```
### Modal with Confirm Action

4
docs/sigpro-ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long