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

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

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
docs/components/tabs.md
View File

@@ -70,19 +70,19 @@ const BasicDemo = () => {
label: 'Tab 1',
active: () => activeTab() === 'tab1',
onclick: () => activeTab('tab1'),
content: Div({ class: 'p-4' }, 'Content for Tab 1')
content: div({ class: 'p-4' }, 'Content for Tab 1')
},
{
label: 'Tab 2',
active: () => activeTab() === 'tab2',
onclick: () => activeTab('tab2'),
content: Div({ class: 'p-4' }, 'Content for Tab 2')
content: div({ class: 'p-4' }, 'Content for Tab 2')
},
{
label: 'Tab 3',
active: () => activeTab() === 'tab3',
onclick: () => activeTab('tab3'),
content: Div({ class: 'p-4' }, 'Content for Tab 3')
content: div({ class: 'p-4' }, 'Content for Tab 3')
}
]
});
@@ -106,22 +106,22 @@ const IconsDemo = () => {
return Tabs({
items: [
{
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
label: span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
active: () => activeTab() === 'home',
onclick: () => activeTab('home'),
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
content: div({ class: 'p-4' }, 'Welcome to the Home tab!')
},
{
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
label: span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
active: () => activeTab() === 'favorites',
onclick: () => activeTab('favorites'),
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
content: div({ class: 'p-4' }, 'Your favorite items appear here.')
},
{
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
label: span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
active: () => activeTab() === 'settings',
onclick: () => activeTab('settings'),
content: Div({ class: 'p-4' }, 'Configure your preferences.')
content: div({ class: 'p-4' }, 'Configure your preferences.')
}
]
});
@@ -149,21 +149,21 @@ const TooltipsDemo = () => {
tip: 'View your profile information',
active: () => activeTab() === 'profile',
onclick: () => activeTab('profile'),
content: Div({ class: 'p-4' }, 'Profile information here.')
content: div({ class: 'p-4' }, 'Profile information here.')
},
{
label: 'Settings',
tip: 'Adjust your preferences',
active: () => activeTab() === 'settings',
onclick: () => activeTab('settings'),
content: Div({ class: 'p-4' }, 'Settings configuration.')
content: div({ class: 'p-4' }, 'Settings configuration.')
},
{
label: 'Notifications',
tip: 'Manage notifications',
active: () => activeTab() === 'notifications',
onclick: () => activeTab('notifications'),
content: Div({ class: 'p-4' }, 'Notification settings.')
content: div({ class: 'p-4' }, 'Notification settings.')
}
]
});
@@ -190,19 +190,19 @@ const DisabledDemo = () => {
label: 'Basic',
active: () => activeTab() === 'basic',
onclick: () => activeTab('basic'),
content: Div({ class: 'p-4' }, 'Basic features available.')
content: div({ class: 'p-4' }, 'Basic features available.')
},
{
label: 'Premium',
disabled: true,
tip: 'Upgrade to access',
content: Div({ class: 'p-4' }, 'Premium content (locked)')
content: div({ class: 'p-4' }, 'Premium content (locked)')
},
{
label: 'Pro',
disabled: true,
tip: 'Coming soon',
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
content: div({ class: 'p-4' }, 'Pro features (coming soon)')
}
]
});
@@ -230,9 +230,9 @@ const ReactiveDemo = () => {
label: 'Counter',
active: () => activeTab() === 'counter',
onclick: () => activeTab('counter'),
content: Div({ class: 'p-4 text-center' }, [
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
Button({
content: div({ class: 'p-4 text-center' }, [
div({ class: 'text-4xl font-bold mb-4' }, () => count()),
button({
class: 'btn btn-primary',
onclick: () => count(count() + 1)
}, 'Increment')
@@ -242,13 +242,13 @@ const ReactiveDemo = () => {
label: 'Timer',
active: () => activeTab() === 'timer',
onclick: () => activeTab('timer'),
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
content: div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
},
{
label: 'Status',
active: () => activeTab() === 'status',
onclick: () => activeTab('status'),
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
content: div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
}
]
});
@@ -286,21 +286,21 @@ const FormTabs = () => {
console.log(formData());
};
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Tabs({
items: [
{
label: 'Personal Info',
active: () => activeTab() === 'personal',
onclick: () => activeTab('personal'),
content: Div({ class: 'p-4 space-y-4' }, [
Input({
content: div({ class: 'p-4 space-y-4' }, [
input({
label: 'Name',
value: () => formData().name,
placeholder: 'Enter your name',
oninput: (e) => updateField('name', e.target.value)
}),
Input({
input({
label: 'Email',
type: 'email',
value: () => formData().email,
@@ -313,14 +313,14 @@ const FormTabs = () => {
label: 'Address',
active: () => activeTab() === 'address',
onclick: () => activeTab('address'),
content: Div({ class: 'p-4 space-y-4' }, [
Input({
content: div({ class: 'p-4 space-y-4' }, [
input({
label: 'Address',
value: () => formData().address,
placeholder: 'Street address',
oninput: (e) => updateField('address', e.target.value)
}),
Input({
input({
label: 'City',
value: () => formData().city,
placeholder: 'City',
@@ -332,7 +332,7 @@ const FormTabs = () => {
label: 'Preferences',
active: () => activeTab() === 'prefs',
onclick: () => activeTab('prefs'),
content: Div({ class: 'p-4 space-y-4' }, [
content: div({ class: 'p-4 space-y-4' }, [
Checkbox({
label: 'Email notifications',
value: () => formData().notifications,
@@ -347,8 +347,8 @@ const FormTabs = () => {
}
]
}),
Div({ class: 'flex justify-end mt-4' }, [
Button({
div({ class: 'flex justify-end mt-4' }, [
button({
class: 'btn btn-primary',
onclick: handleSubmit
}, 'Submit')
@@ -379,39 +379,39 @@ const VariantsDemo = () => {
label: 'Tab 1',
active: () => active() === 'tab1',
onclick: () => active('tab1'),
content: Div({ class: 'p-4' }, 'Content 1')
content: div({ class: 'p-4' }, 'Content 1')
},
{
label: 'Tab 2',
active: () => active() === 'tab2',
onclick: () => active('tab2'),
content: Div({ class: 'p-4' }, 'Content 2')
content: div({ class: 'p-4' }, 'Content 2')
},
{
label: 'Tab 3',
active: () => active() === 'tab3',
onclick: () => active('tab3'),
content: Div({ class: 'p-4' }, 'Content 3')
content: div({ class: 'p-4' }, 'Content 3')
},
{
label: 'Tab 4',
active: () => active() === 'tab4',
onclick: () => active('tab4'),
content: Div({ class: 'p-4' }, 'Content 4')
content: div({ class: 'p-4' }, 'Content 4')
}
];
return Div({ class: 'flex flex-col gap-6' }, [
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
return div({ class: 'flex flex-col gap-6' }, [
div({ class: 'text-sm font-bold' }, 'Default Tabs'),
Tabs({ items: createItems(active1) }),
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
Tabs({ items: createItems(active2), class: 'tabs-box' }),
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
Tabs({ items: createItems(active3), class: 'tabs-lift' }),
Div({ class: 'text-sm font-bold mt-4' }, 'Bordered Tabs'),
div({ class: 'text-sm font-bold mt-4' }, 'Bordered Tabs'),
Tabs({ items: createItems(active4), class: 'tabs-border' })
]);
};
@@ -427,9 +427,9 @@ let nextTabId = 4;
const ClosableTabsDemo = () => {
const tabs = $([
{ label: 'Tab 1', tip:"Tab1" , content: Div('Content 1') }, // ❌ quita active: true
{ label: 'Tab 2', tip: "Tab 2 Default", content: Div('Content 2'), closable: true },
{ label: 'Tab 3', content: Div('Content 3'), closable: true }
{ label: 'Tab 1', tip:"Tab1" , content: div('Content 1') }, // ❌ quita active: true
{ label: 'Tab 2', tip: "Tab 2 Default", content: div('Content 2'), closable: true },
{ label: 'Tab 3', content: div('Content 3'), closable: true }
]);
// Opcional: si quieres que la primera pestaña esté activa al inicio,
@@ -440,14 +440,14 @@ const ClosableTabsDemo = () => {
const newId = nextTabId++;
tabs([...tabs(), {
label: `Tab ${newId}`,
content: Div(`Content ${newId}`),
content: div(`Content ${newId}`),
onClose: (item) => console.log('Closing Individual', item),
closable: true
}]);
};
return Div({ class: 'flex flex-col gap-4' }, [
Button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'),
return div({ class: 'flex flex-col gap-4' }, [
button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'),
Tabs({ items: tabs, onTabClose: (item) => console.log('Closing', item) })
]);
};