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

Update new functions

Browse Source
This commit is contained in:
natxocc
2026-04-06 03:19:15 +02:00
parent f9095332eb
commit 294547fc56
139 changed files with 2249 additions and 2109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Readme.md
View File

@@ -48,7 +48,7 @@ You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fast
Import only the components you need:
```javascript
import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
import { $, Mount, Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css";
const App = () => {
@@ -63,7 +63,7 @@ const App = () => {
);
};
$mount(App, "#app");
Mount(App, "#app");
```
### 2. Global Approach (Zero-Import)
@@ -85,7 +85,7 @@ const myApp = () => Table({ items: [], columns: [] });
## Basic Example
```javascript
import { $, $mount, Button, Toast, Div, H1 } from "sigpro-ui";
import { $, Mount, Button, Toast, Div, H1 } from "sigpro-ui";
import "sigpro-ui/css";
const App = () => {
@@ -104,7 +104,7 @@ const App = () => {
]);
};
$mount(App, "#app");
Mount(App, "#app");
```
---
@@ -113,12 +113,12 @@ $mount(App, "#app");
### Core Functions (from SigPro)
- `$()` - 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
- `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
Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.

144
css/sigpro.css
View File

@@ -6969,6 +6969,49 @@
}
}
}
.input, .select, .textarea {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
&:focus, &:focus-within {
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
&:hover:not(:focus) {
background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
}
&:focus {
--focus-color: var(--color-primary);
&[class*="-secondary"] {
--focus-color: var(--color-secondary);
}
&[class*="-accent"] {
--focus-color: var(--color-accent);
}
&[class*="-neutral"] {
--focus-color: var(--color-neutral);
}
&[class*="-ghost"] {
--focus-color: var(--color-base-content);
}
&[class*="-info"] {
--focus-color: var(--color-info);
}
&[class*="-success"] {
--focus-color: var(--color-success);
}
&[class*="-warning"] {
--focus-color: var(--color-warning);
}
&[class*="-error"] {
--focus-color: var(--color-error);
}
background-color: oklch(from var(--focus-color) l c h / 0.05);
border-color: var(--focus-color);
box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
&[class*="-ghost"] {
border-width: 1px;
}
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
color-scheme: light;
@@ -7215,6 +7258,107 @@
background-position-x: -115%;
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(92% 0 0);
--color-base-content: oklch(25% 0.006 285);
--color-primary: oklch(25% 0.006 285);
--color-primary-content: oklch(98% 0 0);
--color-secondary: oklch(55% 0.046 257.417);
--color-secondary-content: oklch(98% 0 0);
--color-accent: oklch(96% 0 0);
--color-accent-content: oklch(25% 0.006 285);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(62% 0.17 163);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.18 84);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(60% 0.25 27);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.4rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
}
@layer base {
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(15% 0.005 285.823);
--color-base-200: oklch(20% 0.005 285.823);
--color-base-300: oklch(30% 0.005 285.823);
--color-base-content: oklch(92% 0.004 286.32);
--color-primary: oklch(98% 0 0);
--color-primary-content: oklch(15% 0 0);
--color-secondary: oklch(65% 0.046 257.417);
--color-secondary-content: oklch(15% 0.005 285.823);
--color-accent: oklch(25% 0 0);
--color-accent-content: oklch(98% 0 0);
--color-neutral: oklch(92% 0.004 286.32);
--color-neutral-content: oklch(14% 0.005 285.823);
--color-info: oklch(70% 0.1 230);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(65% 0.15 160);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(85% 0.15 90);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(55% 0.2 27);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.4rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
}
}
@layer base {
:root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
color-scheme: dark;
--color-base-100: oklch(15% 0.005 285.823);
--color-base-200: oklch(20% 0.005 285.823);
--color-base-300: oklch(30% 0.005 285.823);
--color-base-content: oklch(92% 0.004 286.32);
--color-primary: oklch(98% 0 0);
--color-primary-content: oklch(15% 0 0);
--color-secondary: oklch(65% 0.046 257.417);
--color-secondary-content: oklch(15% 0.005 285.823);
--color-accent: oklch(25% 0 0);
--color-accent-content: oklch(98% 0 0);
--color-neutral: oklch(92% 0.004 286.32);
--color-neutral-content: oklch(14% 0.005 285.823);
--color-info: oklch(70% 0.1 230);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(65% 0.15 160);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(85% 0.15 90);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(55% 0.2 27);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.4rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;

2
css/sigpro.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

8
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

948
dist/sigpro-ui.js vendored
View File

File diff suppressed because it is too large Load Diff

8
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/README.md
View File

@@ -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`, `$html`, etc.) to be present in the global scope or provided as a module.
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `Watch`, `Tag`, etc.) to be present in the global scope or provided as a module.
### 2. daisyUI v5

12
docs/components/accordion.md
View File

@@ -69,7 +69,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Group Accordion (Radio Style)
@@ -112,7 +112,7 @@ const GroupDemo = () => {
])
]);
};
$mount(GroupDemo, '#demo-group');
Mount(GroupDemo, '#demo-group');
```
### FAQ Accordion
@@ -146,7 +146,7 @@ const FaqDemo = () => {
])
));
};
$mount(FaqDemo, '#demo-faq');
Mount(FaqDemo, '#demo-faq');
```
### With Rich Content
@@ -218,7 +218,7 @@ const RichDemo = () => {
])
]);
};
$mount(RichDemo, '#demo-rich');
Mount(RichDemo, '#demo-rich');
```
### Form Accordion
@@ -346,7 +346,7 @@ const FormAccordion = () => {
])
]);
};
$mount(FormAccordion, '#demo-form');
Mount(FormAccordion, '#demo-form');
```
### All Variants
@@ -396,5 +396,5 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

16
docs/components/alert.md
View File

@@ -60,7 +60,7 @@ const BasicDemo = () => {
Alert({ type: 'error', message: 'An error occurred while processing your request.' })
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Soft vs Solid Variants
@@ -81,7 +81,7 @@ const VariantsDemo = () => {
Alert({ type: 'success', soft: false, message: 'Solid success alert' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### With Actions
@@ -130,7 +130,7 @@ const ActionsDemo = () => {
}) : null
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Dismissible Alert
@@ -161,7 +161,7 @@ const DismissibleDemo = () => {
}, 'Show Alert') : null
]);
};
$mount(DismissibleDemo, '#demo-dismissible');
Mount(DismissibleDemo, '#demo-dismissible');
```
### Reactive Alert
@@ -201,7 +201,7 @@ const ReactiveDemo = () => {
}) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Validation
@@ -268,7 +268,7 @@ const FormDemo = () => {
}) : null
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
### Icon Alerts
@@ -289,7 +289,7 @@ const IconsDemo = () => {
Alert({ type: 'error', message: 'Error alert with custom icon' })
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### All Types
@@ -310,5 +310,5 @@ const AllTypesDemo = () => {
Alert({ type: 'error', message: '❌ This is an error alert' })
]);
};
$mount(AllTypesDemo, '#demo-all');
Mount(AllTypesDemo, '#demo-all');
```

10
docs/components/autocomplete.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
onSelect: (value) => selected(value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Objects
@@ -94,7 +94,7 @@ const ObjectsDemo = () => {
])
]);
};
$mount(ObjectsDemo, '#demo-objects');
Mount(ObjectsDemo, '#demo-objects');
```
### With Reactive Display
@@ -125,7 +125,7 @@ const ReactiveDemo = () => {
]) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Dynamic Items
@@ -165,7 +165,7 @@ const DynamicDemo = () => {
})
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -208,5 +208,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');
```

14
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
@@ -72,7 +72,7 @@ const LoadingDemo = () => {
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
Mount(LoadingDemo, "#demo-loading");
```
### With Icon
@@ -89,7 +89,7 @@ const IconDemo = () => {
"Favorite",
);
};
$mount(IconDemo, "#demo-icon");
Mount(IconDemo, "#demo-icon");
```
### With Badge (using Indicator)
@@ -103,7 +103,7 @@ const BadgeDemo = () => {
Button({ class: "btn-outline" }, "Notifications"),
);
};
$mount(BadgeDemo, "#demo-badge");
Mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -114,7 +114,7 @@ $mount(BadgeDemo, "#demo-badge");
const TooltipDemo = () => {
return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
};
$mount(TooltipDemo, "#demo-tooltip");
Mount(TooltipDemo, "#demo-tooltip");
```
### Combined (Badge + Tooltip)
@@ -139,7 +139,7 @@ const CombinedDemo = () => {
),
);
};
$mount(CombinedDemo, "#demo-combined");
Mount(CombinedDemo, "#demo-combined");
```
### All Color Variants
@@ -156,5 +156,5 @@ const VariantsDemo = () => {
Button({ class: "btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
Mount(VariantsDemo, "#demo-variants");
```

14
docs/components/checkbox.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Toggle Switch
@@ -90,7 +90,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
$mount(ToggleDemo, '#demo-toggle');
Mount(ToggleDemo, '#demo-toggle');
```
### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
onclick: () => darkMode(!darkMode())
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -140,7 +140,7 @@ const DisabledDemo = () => {
})
]);
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Multiple Selection
@@ -193,7 +193,7 @@ const MultipleDemo = () => {
})
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### All Variants
@@ -242,7 +242,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Form Example
@@ -286,5 +286,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'),
$html('textarea', {
Tag('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');
```

14
docs/components/input.md
View File

@@ -43,7 +43,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icon
@@ -66,7 +66,7 @@ const IconDemo = () => {
oninput: (e) => email(e.target.value)
});
};
$mount(IconDemo, '#demo-icon');
Mount(IconDemo, '#demo-icon');
```
### Password with Toggle
@@ -88,7 +88,7 @@ const PasswordDemo = () => {
oninput: (e) => password(e.target.value)
});
};
$mount(PasswordDemo, '#demo-password');
Mount(PasswordDemo, '#demo-password');
```
### With Tooltip
@@ -110,7 +110,7 @@ const TooltipDemo = () => {
oninput: (e) => username(e.target.value)
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Error State
@@ -142,7 +142,7 @@ const ErrorDemo = () => {
})
]);
};
$mount(ErrorDemo, '#demo-error');
Mount(ErrorDemo, '#demo-error');
```
### Disabled State
@@ -161,7 +161,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### All Variants
@@ -205,5 +205,5 @@ const VariantsDemo = () => {
]);
};
$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');
```
### Modal with Actions
@@ -113,7 +113,7 @@ const ActionsDemo = () => {
])
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Form Modal
@@ -182,7 +182,7 @@ const FormModal = () => {
])
]);
};
$mount(FormModal, '#demo-form');
Mount(FormModal, '#demo-form');
```
### Confirmation Modal
@@ -243,7 +243,7 @@ const ConfirmDemo = () => {
])
]);
};
$mount(ConfirmDemo, '#demo-confirm');
Mount(ConfirmDemo, '#demo-confirm');
```
### Large Content Modal
@@ -295,7 +295,7 @@ const LargeDemo = () => {
])
]);
};
$mount(LargeDemo, '#demo-large');
Mount(LargeDemo, '#demo-large');
```
### Multiple Modals
@@ -337,7 +337,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.')
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### Custom Styled Modal
@@ -374,5 +374,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

@@ -56,7 +56,7 @@ const BasicDemo = () => {
onchange: (e) => selected(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Display
@@ -85,7 +85,7 @@ const ReactiveDemo = () => {
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Disabled State
@@ -110,7 +110,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Dynamic Items
@@ -160,7 +160,7 @@ const DynamicDemo = () => {
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -213,5 +213,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

@@ -50,7 +50,7 @@ const BasicDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Icon Swap
@@ -73,7 +73,7 @@ const IconsDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Emoji Swap
@@ -96,7 +96,7 @@ const EmojiDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(EmojiDemo, '#demo-emoji');
Mount(EmojiDemo, '#demo-emoji');
```
### Custom Content Swap
@@ -119,7 +119,7 @@ const CustomDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### With Reactive State
@@ -149,7 +149,7 @@ const ReactiveDemo = () => {
)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Toggle Mode Swap
@@ -200,7 +200,7 @@ const ModeDemo = () => {
])
]);
};
$mount(ModeDemo, '#demo-mode');
Mount(ModeDemo, '#demo-mode');
```
### All Variants
@@ -249,7 +249,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Simple Todo Toggle
@@ -288,5 +288,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');
```

14
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
@@ -405,5 +405,5 @@ const VariantsDemo = () => {
Tabs({ items: createItems(active3), class: 'tabs-lifted' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```

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');
```

24
docs/components_old/accordion.md
View File

@@ -57,7 +57,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Group Accordion (Radio Style)
@@ -100,7 +100,7 @@ const GroupDemo = () => {
])
]);
};
$mount(GroupDemo, '#demo-group');
Mount(GroupDemo, '#demo-group');
```
### FAQ Accordion
@@ -134,7 +134,7 @@ const FaqDemo = () => {
])
));
};
$mount(FaqDemo, '#demo-faq');
Mount(FaqDemo, '#demo-faq');
```
### With Rich Content
@@ -206,7 +206,7 @@ const RichDemo = () => {
])
]);
};
$mount(RichDemo, '#demo-rich');
Mount(RichDemo, '#demo-rich');
```
### Form Accordion
@@ -334,7 +334,7 @@ const FormAccordion = () => {
])
]);
};
$mount(FormAccordion, '#demo-form');
Mount(FormAccordion, '#demo-form');
```
### All Variants
@@ -384,7 +384,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -423,7 +423,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Group Accordion (Radio Style)
@@ -459,7 +459,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(GroupDemo, groupTarget);
Mount(GroupDemo, groupTarget);
}
// 3. FAQ Accordion
@@ -486,7 +486,7 @@ $mount(VariantsDemo, '#demo-variants');
])
));
};
$mount(FaqDemo, faqTarget);
Mount(FaqDemo, faqTarget);
}
// 4. With Rich Content
@@ -551,7 +551,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(RichDemo, richTarget);
Mount(RichDemo, richTarget);
}
// 5. Form Accordion
@@ -672,7 +672,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(FormAccordion, formTarget);
Mount(FormAccordion, formTarget);
}
// 6. All Variants
@@ -715,7 +715,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/alert.md
View File

@@ -37,7 +37,7 @@ const BasicDemo = () => {
Alert({ type: 'error', message: 'An error occurred while processing your request.' })
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Soft vs Solid Variants
@@ -58,7 +58,7 @@ const VariantsDemo = () => {
Alert({ type: 'success', soft: false, message: 'Solid success alert' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### With Actions
@@ -107,7 +107,7 @@ const ActionsDemo = () => {
}) : null
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Dismissible Alert
@@ -138,7 +138,7 @@ const DismissibleDemo = () => {
}, 'Show Alert') : null
]);
};
$mount(DismissibleDemo, '#demo-dismissible');
Mount(DismissibleDemo, '#demo-dismissible');
```
### Reactive Alert
@@ -178,7 +178,7 @@ const ReactiveDemo = () => {
}) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Validation
@@ -245,7 +245,7 @@ const FormDemo = () => {
}) : null
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
### Icon Alerts
@@ -266,7 +266,7 @@ const IconsDemo = () => {
Alert({ type: 'error', message: 'Error alert with custom icon' })
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### All Types
@@ -287,7 +287,7 @@ const AllTypesDemo = () => {
Alert({ type: 'error', message: '❌ This is an error alert' })
]);
};
$mount(AllTypesDemo, '#demo-all');
Mount(AllTypesDemo, '#demo-all');
```
<script>
@@ -305,7 +305,7 @@ $mount(AllTypesDemo, '#demo-all');
Alert({ type: 'error', message: 'An error occurred while processing your request.' })
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Soft vs Solid Variants
@@ -319,7 +319,7 @@ $mount(AllTypesDemo, '#demo-all');
Alert({ type: 'success', soft: false, message: 'Solid success alert' })
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 3. With Actions
@@ -361,7 +361,7 @@ $mount(AllTypesDemo, '#demo-all');
}) : null
]);
};
$mount(ActionsDemo, actionsTarget);
Mount(ActionsDemo, actionsTarget);
}
// 4. Dismissible Alert
@@ -385,7 +385,7 @@ $mount(AllTypesDemo, '#demo-all');
}, 'Show Alert') : null
]);
};
$mount(DismissibleDemo, dismissibleTarget);
Mount(DismissibleDemo, dismissibleTarget);
}
// 5. Reactive Alert
@@ -418,7 +418,7 @@ $mount(AllTypesDemo, '#demo-all');
}) : null
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 6. Form Validation
@@ -478,7 +478,7 @@ $mount(AllTypesDemo, '#demo-all');
}) : null
]);
};
$mount(FormDemo, formTarget);
Mount(FormDemo, formTarget);
}
// 7. Icon Alerts
@@ -492,7 +492,7 @@ $mount(AllTypesDemo, '#demo-all');
Alert({ type: 'error', message: 'Error alert with custom icon' })
]);
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 8. All Types
@@ -506,7 +506,7 @@ $mount(AllTypesDemo, '#demo-all');
Alert({ type: 'error', message: '❌ This is an error alert' })
]);
};
$mount(AllTypesDemo, allTarget);
Mount(AllTypesDemo, allTarget);
}
};

20
docs/components_old/autocomplete.md
View File

@@ -40,7 +40,7 @@ const BasicDemo = () => {
onSelect: (value) => selected(value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Objects
@@ -84,7 +84,7 @@ const ObjectsDemo = () => {
])
]);
};
$mount(ObjectsDemo, '#demo-objects');
Mount(ObjectsDemo, '#demo-objects');
```
### With Reactive Display
@@ -116,7 +116,7 @@ const ReactiveDemo = () => {
]) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Dynamic Options
@@ -158,7 +158,7 @@ const DynamicDemo = () => {
})
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -204,7 +204,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -225,7 +225,7 @@ $mount(VariantsDemo, '#demo-variants');
onSelect: (value) => selected(value)
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Objects
@@ -262,7 +262,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ObjectsDemo, objectsTarget);
Mount(ObjectsDemo, objectsTarget);
}
// 3. Reactive Display
@@ -287,7 +287,7 @@ $mount(VariantsDemo, '#demo-variants');
]) : null
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 4. Dynamic Options
@@ -322,7 +322,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(DynamicDemo, dynamicTarget);
Mount(DynamicDemo, dynamicTarget);
}
// 5. All Variants
@@ -361,7 +361,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

40
docs/components_old/badge.md
View File

@@ -37,7 +37,7 @@ const BasicDemo = () => {
Badge({ class: 'badge-error' }, 'Error')
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Badge Sizes
@@ -59,7 +59,7 @@ const SizesDemo = () => {
Badge({ class: 'badge-lg' }, 'Large')
]);
};
$mount(SizesDemo, '#demo-sizes');
Mount(SizesDemo, '#demo-sizes');
```
### Outline Badges
@@ -84,7 +84,7 @@ const OutlineDemo = () => {
Badge({ class: 'badge-outline badge-error' }, 'Error')
]);
};
$mount(OutlineDemo, '#demo-outline');
Mount(OutlineDemo, '#demo-outline');
```
### Ghost Badges
@@ -109,7 +109,7 @@ const GhostDemo = () => {
Badge({ class: 'badge-ghost badge-error' }, 'Error')
]);
};
$mount(GhostDemo, '#demo-ghost');
Mount(GhostDemo, '#demo-ghost');
```
### With Icons
@@ -146,7 +146,7 @@ const IconsDemo = () => {
])
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Status Badges
@@ -175,7 +175,7 @@ const StatusDemo = () => {
))
]);
};
$mount(StatusDemo, '#demo-status');
Mount(StatusDemo, '#demo-status');
```
### Count Badges
@@ -208,7 +208,7 @@ const CountDemo = () => {
])
]);
};
$mount(CountDemo, '#demo-count');
Mount(CountDemo, '#demo-count');
```
### Interactive Badge
@@ -236,7 +236,7 @@ const InteractiveDemo = () => {
}, 'Reset')
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### All Variants
@@ -268,7 +268,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Inline with Text
@@ -300,7 +300,7 @@ const InlineDemo = () => {
])
]);
};
$mount(InlineDemo, '#demo-inline');
Mount(InlineDemo, '#demo-inline');
```
<script>
@@ -322,7 +322,7 @@ $mount(InlineDemo, '#demo-inline');
Badge({ class: 'badge-error' }, 'Error')
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Badge Sizes
@@ -337,7 +337,7 @@ $mount(InlineDemo, '#demo-inline');
Badge({ class: 'badge-lg' }, 'Large')
]);
};
$mount(SizesDemo, sizesTarget);
Mount(SizesDemo, sizesTarget);
}
// 3. Outline Badges
@@ -355,7 +355,7 @@ $mount(InlineDemo, '#demo-inline');
Badge({ class: 'badge-outline badge-error' }, 'Error')
]);
};
$mount(OutlineDemo, outlineTarget);
Mount(OutlineDemo, outlineTarget);
}
// 4. Ghost Badges
@@ -373,7 +373,7 @@ $mount(InlineDemo, '#demo-inline');
Badge({ class: 'badge-ghost badge-error' }, 'Error')
]);
};
$mount(GhostDemo, ghostTarget);
Mount(GhostDemo, ghostTarget);
}
// 5. With Icons
@@ -403,7 +403,7 @@ $mount(InlineDemo, '#demo-inline');
])
]);
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 6. Status Badges
@@ -425,7 +425,7 @@ $mount(InlineDemo, '#demo-inline');
))
]);
};
$mount(StatusDemo, statusTarget);
Mount(StatusDemo, statusTarget);
}
// 7. Count Badges
@@ -451,7 +451,7 @@ $mount(InlineDemo, '#demo-inline');
])
]);
};
$mount(CountDemo, countTarget);
Mount(CountDemo, countTarget);
}
// 8. Interactive Badge
@@ -472,7 +472,7 @@ $mount(InlineDemo, '#demo-inline');
}, 'Reset')
]);
};
$mount(InteractiveDemo, interactiveTarget);
Mount(InteractiveDemo, interactiveTarget);
}
// 9. All Variants
@@ -497,7 +497,7 @@ $mount(InlineDemo, '#demo-inline');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 10. Inline with Text
@@ -522,7 +522,7 @@ $mount(InlineDemo, '#demo-inline');
])
]);
};
$mount(InlineDemo, inlineTarget);
Mount(InlineDemo, inlineTarget);
}
};

24
docs/components_old/button copy.md
View File

@@ -35,7 +35,7 @@ Styled button with full DaisyUI support and reactive states.
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
Mount(BasicDemo, "#demo-basic");
```
### With Loading State
@@ -64,7 +64,7 @@ const LoadingDemo = () => {
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
Mount(LoadingDemo, "#demo-loading");
```
### With Badge
@@ -87,7 +87,7 @@ const BadgeDemo = () => {
"Notifications",
);
};
$mount(BadgeDemo, "#demo-badge");
Mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -109,7 +109,7 @@ const TooltipDemo = () => {
"Delete",
);
};
$mount(TooltipDemo, "#demo-tooltip");
Mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
@@ -133,7 +133,7 @@ const DisabledDemo = () => {
"Submit",
);
};
$mount(DisabledDemo, "#demo-disabled");
Mount(DisabledDemo, "#demo-disabled");
```
### All Variants
@@ -155,7 +155,7 @@ const VariantsDemo = () => {
Button({ class: "btn btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
Mount(VariantsDemo, "#demo-variants");
```
<script>
@@ -166,7 +166,7 @@ $mount(VariantsDemo, "#demo-variants");
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Loading State
@@ -184,7 +184,7 @@ $mount(VariantsDemo, "#demo-variants");
}
}, "Save Changes");
};
$mount(LoadingDemo, loadingTarget);
Mount(LoadingDemo, loadingTarget);
}
// 3. Badge
@@ -195,7 +195,7 @@ $mount(VariantsDemo, "#demo-variants");
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
$mount(BadgeDemo, badgeTarget);
Mount(BadgeDemo, badgeTarget);
}
// 4. Tooltip
@@ -205,7 +205,7 @@ $mount(VariantsDemo, "#demo-variants");
class: "btn btn-ghost",
tooltip: "Delete item"
}, "Delete");
$mount(TooltipDemo, tooltipTarget);
Mount(TooltipDemo, tooltipTarget);
}
// 5. Disabled State
@@ -218,7 +218,7 @@ $mount(VariantsDemo, "#demo-variants");
disabled: isDisabled
}, "Submit");
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 6. All Variants
@@ -231,7 +231,7 @@ $mount(VariantsDemo, "#demo-variants");
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline")
]);
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

16
docs/components_old/button.md
View File

@@ -57,7 +57,7 @@ For more detailed information about the underlying styling system, visit the dai
const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
Mount(BasicDemo, "#demo-basic");
```
### With Loading State
@@ -81,7 +81,7 @@ const LoadingDemo = () => {
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
Mount(LoadingDemo, "#demo-loading");
```
### With Badge
@@ -99,7 +99,7 @@ const BadgeDemo = () => {
"Notifications",
);
};
$mount(BadgeDemo, "#demo-badge");
Mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -116,7 +116,7 @@ const TooltipDemo = () => {
"Delete",
);
};
$mount(TooltipDemo, "#demo-tooltip");
Mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
@@ -134,7 +134,7 @@ const DisabledDemo = () => {
"Submit",
);
};
$mount(DisabledDemo, "#demo-disabled");
Mount(DisabledDemo, "#demo-disabled");
```
### All Variants
@@ -151,7 +151,7 @@ const VariantsDemo = () => {
Button({ class: "btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
Mount(VariantsDemo, "#demo-variants");
```
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
@@ -159,10 +159,10 @@ $mount(VariantsDemo, "#demo-variants");
```javascript
const TestDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
$html("span", {class: "indicator"},[
Tag("span", {class: "indicator"},[
5,
Button('Click')])
]);
};
$mount(TestDemo, "#demo-test");
Mount(TestDemo, "#demo-test");
```

28
docs/components_old/checkbox.md
View File

@@ -39,7 +39,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Toggle Switch
@@ -67,7 +67,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
$mount(ToggleDemo, '#demo-toggle');
Mount(ToggleDemo, '#demo-toggle');
```
### With Tooltip
@@ -90,7 +90,7 @@ const TooltipDemo = () => {
onclick: () => darkMode(!darkMode())
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -117,7 +117,7 @@ const DisabledDemo = () => {
})
]);
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Multiple Selection
@@ -170,7 +170,7 @@ const MultipleDemo = () => {
})
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### All Variants
@@ -219,7 +219,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Form Example
@@ -263,7 +263,7 @@ const FormDemo = () => {
: null
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
<script>
@@ -282,7 +282,7 @@ $mount(FormDemo, '#demo-form');
onclick: () => accepted(!accepted())
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Toggle Switch
@@ -303,7 +303,7 @@ $mount(FormDemo, '#demo-form');
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
$mount(ToggleDemo, toggleTarget);
Mount(ToggleDemo, toggleTarget);
}
// 3. With Tooltip
@@ -319,7 +319,7 @@ $mount(FormDemo, '#demo-form');
onclick: () => darkMode(!darkMode())
});
};
$mount(TooltipDemo, tooltipTarget);
Mount(TooltipDemo, tooltipTarget);
}
// 4. Disabled State
@@ -339,7 +339,7 @@ $mount(FormDemo, '#demo-form');
})
]);
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 5. Reactive Multiple Selection
@@ -385,7 +385,7 @@ $mount(FormDemo, '#demo-form');
})
]);
};
$mount(MultipleDemo, multipleTarget);
Mount(MultipleDemo, multipleTarget);
}
// 6. All Variants
@@ -427,7 +427,7 @@ $mount(FormDemo, '#demo-form');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 7. Form Example
@@ -464,7 +464,7 @@ $mount(FormDemo, '#demo-form');
: null
]);
};
$mount(FormDemo, formTarget);
Mount(FormDemo, formTarget);
}
};

24
docs/components_old/colorpicker.md
View File

@@ -34,7 +34,7 @@ const BasicDemo = () => {
value: color
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Preview
@@ -63,7 +63,7 @@ const PreviewDemo = () => {
])
]);
};
$mount(PreviewDemo, '#demo-preview');
Mount(PreviewDemo, '#demo-preview');
```
### Color Palette Grid
@@ -101,7 +101,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
@@ -137,7 +137,7 @@ const TextDemo = () => {
])
]);
};
$mount(TextDemo, '#demo-text');
Mount(TextDemo, '#demo-text');
```
### All Variants
@@ -170,7 +170,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Dynamic Color Swatch
@@ -210,7 +210,7 @@ const DynamicDemo = () => {
])
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
<script>
@@ -227,7 +227,7 @@ $mount(DynamicDemo, '#demo-dynamic');
value: color
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Reactive Preview
@@ -248,7 +248,7 @@ $mount(DynamicDemo, '#demo-dynamic');
])
]);
};
$mount(PreviewDemo, previewTarget);
Mount(PreviewDemo, previewTarget);
}
// 3. Color Palette Grid
@@ -279,7 +279,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
$mount(PaletteDemo, paletteTarget);
Mount(PaletteDemo, paletteTarget);
}
// 4. With Text Color Preview
@@ -308,7 +308,7 @@ $mount(DynamicDemo, '#demo-dynamic');
])
]);
};
$mount(TextDemo, textTarget);
Mount(TextDemo, textTarget);
}
// 5. All Variants
@@ -334,7 +334,7 @@ $mount(DynamicDemo, '#demo-dynamic');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 6. Dynamic Color Swatch
@@ -367,7 +367,7 @@ $mount(DynamicDemo, '#demo-dynamic');
])
]);
};
$mount(DynamicDemo, dynamicTarget);
Mount(DynamicDemo, dynamicTarget);
}
};

24
docs/components_old/datepicker.md
View File

@@ -38,7 +38,7 @@ const BasicDemo = () => {
placeholder: 'Choose a date...'
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Date Range Picker
@@ -66,7 +66,7 @@ const RangeDemo = () => {
]) : null
]);
};
$mount(RangeDemo, '#demo-range');
Mount(RangeDemo, '#demo-range');
```
### With Time Selection
@@ -94,7 +94,7 @@ const TimeDemo = () => {
]) : null
]);
};
$mount(TimeDemo, '#demo-time');
Mount(TimeDemo, '#demo-time');
```
### Range with Time
@@ -123,7 +123,7 @@ const RangeTimeDemo = () => {
]) : null
]);
};
$mount(RangeTimeDemo, '#demo-range-time');
Mount(RangeTimeDemo, '#demo-range-time');
```
### Reactive Display
@@ -155,7 +155,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### All Variants
@@ -189,7 +189,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -208,7 +208,7 @@ $mount(VariantsDemo, '#demo-variants');
placeholder: 'Choose a date...'
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Date Range Picker
@@ -229,7 +229,7 @@ $mount(VariantsDemo, '#demo-variants');
]) : null
]);
};
$mount(RangeDemo, rangeTarget);
Mount(RangeDemo, rangeTarget);
}
// 3. With Time Selection
@@ -250,7 +250,7 @@ $mount(VariantsDemo, '#demo-variants');
]) : null
]);
};
$mount(TimeDemo, timeTarget);
Mount(TimeDemo, timeTarget);
}
// 4. Range with Time
@@ -272,7 +272,7 @@ $mount(VariantsDemo, '#demo-variants');
]) : null
]);
};
$mount(RangeTimeDemo, rangeTimeTarget);
Mount(RangeTimeDemo, rangeTimeTarget);
}
// 5. Reactive Display
@@ -297,7 +297,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 6. All Variants
@@ -324,7 +324,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/drawer.md
View File

@@ -50,7 +50,7 @@ const BasicDemo = () => {
])
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Navigation Drawer
@@ -127,7 +127,7 @@ const NavDrawer = () => {
])
});
};
$mount(NavDrawer, '#demo-nav');
Mount(NavDrawer, '#demo-nav');
```
### Settings Drawer
@@ -222,7 +222,7 @@ const SettingsDrawer = () => {
])
});
};
$mount(SettingsDrawer, '#demo-settings');
Mount(SettingsDrawer, '#demo-settings');
```
### Cart Drawer
@@ -325,7 +325,7 @@ const CartDrawer = () => {
])
});
};
$mount(CartDrawer, '#demo-cart');
Mount(CartDrawer, '#demo-cart');
```
### Responsive Drawer
@@ -393,7 +393,7 @@ const ResponsiveDrawer = () => {
])
});
};
$mount(ResponsiveDrawer, '#demo-responsive');
Mount(ResponsiveDrawer, '#demo-responsive');
```
### Form Drawer
@@ -451,7 +451,7 @@ const FormDrawer = () => {
}),
Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'),
$html('textarea', {
Tag('textarea', {
class: 'textarea textarea-bordered h-24',
placeholder: 'Your message',
value: message,
@@ -478,7 +478,7 @@ const FormDrawer = () => {
])
});
};
$mount(FormDrawer, '#demo-form');
Mount(FormDrawer, '#demo-form');
```
<script>
@@ -510,7 +510,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Navigation Drawer
@@ -580,7 +580,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(NavDrawer, navTarget);
Mount(NavDrawer, navTarget);
}
// 3. Settings Drawer
@@ -668,7 +668,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(SettingsDrawer, settingsTarget);
Mount(SettingsDrawer, settingsTarget);
}
// 4. Cart Drawer
@@ -764,7 +764,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(CartDrawer, cartTarget);
Mount(CartDrawer, cartTarget);
}
// 5. Responsive Drawer
@@ -825,7 +825,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(ResponsiveDrawer, responsiveTarget);
Mount(ResponsiveDrawer, responsiveTarget);
}
// 6. Form Drawer
@@ -876,7 +876,7 @@ $mount(FormDrawer, '#demo-form');
}),
Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'),
$html('textarea', {
Tag('textarea', {
class: 'textarea textarea-bordered h-24',
placeholder: 'Your message',
value: message,
@@ -903,7 +903,7 @@ $mount(FormDrawer, '#demo-form');
])
});
};
$mount(FormDrawer, formTarget);
Mount(FormDrawer, formTarget);
}
};

32
docs/components_old/dropdown.md
View File

@@ -47,7 +47,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons (Items Array)
@@ -72,7 +72,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Action Dropdown (Items Array)
@@ -100,7 +100,7 @@ const ActionsDemo = () => {
]
});
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### User Dropdown (Items Array)
@@ -129,7 +129,7 @@ const UserDropdown = () => {
]
});
};
$mount(UserDropdown, '#demo-user');
Mount(UserDropdown, '#demo-user');
```
### Reactive Items
@@ -157,7 +157,7 @@ const ReactiveDropdown = () => {
items: items
});
};
$mount(ReactiveDropdown, '#demo-reactive');
Mount(ReactiveDropdown, '#demo-reactive');
```
### Notification Dropdown (Custom Children)
@@ -212,7 +212,7 @@ const NotificationsDropdown = () => {
])
});
};
$mount(NotificationsDropdown, '#demo-notifications');
Mount(NotificationsDropdown, '#demo-notifications');
```
### Custom Content Dropdown
@@ -249,7 +249,7 @@ const CustomDropdown = () => {
])
});
};
$mount(CustomDropdown, '#demo-custom');
Mount(CustomDropdown, '#demo-custom');
```
### All Variants
@@ -275,7 +275,7 @@ const VariantsDemo = () => {
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -295,7 +295,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Icons (Items Array)
@@ -313,7 +313,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 3. Action Dropdown (Items Array)
@@ -334,7 +334,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(ActionsDemo, actionsTarget);
Mount(ActionsDemo, actionsTarget);
}
// 4. User Dropdown (Items Array)
@@ -356,7 +356,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(UserDropdown, userTarget);
Mount(UserDropdown, userTarget);
}
// 5. Reactive Items
@@ -377,7 +377,7 @@ $mount(VariantsDemo, '#demo-variants');
items: items
});
};
$mount(ReactiveDropdown, reactiveTarget);
Mount(ReactiveDropdown, reactiveTarget);
}
// 6. Notification Dropdown (Custom Children)
@@ -425,7 +425,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(NotificationsDropdown, notifTarget);
Mount(NotificationsDropdown, notifTarget);
}
// 7. Custom Content Dropdown
@@ -455,7 +455,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(CustomDropdown, customTarget);
Mount(CustomDropdown, customTarget);
}
// 8. All Variants
@@ -474,7 +474,7 @@ $mount(VariantsDemo, '#demo-variants');
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

36
docs/components_old/fab.md
View File

@@ -49,7 +49,7 @@ const BasicDemo = () => {
})
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Label
@@ -75,7 +75,7 @@ const LabelDemo = () => {
})
]);
};
$mount(LabelDemo, '#demo-label');
Mount(LabelDemo, '#demo-label');
```
### Different Positions
@@ -119,7 +119,7 @@ const PositionsDemo = () => {
})
]);
};
$mount(PositionsDemo, '#demo-positions');
Mount(PositionsDemo, '#demo-positions');
```
### Color Variants
@@ -164,7 +164,7 @@ const ColorsDemo = () => {
})
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### Reactive Actions
@@ -210,7 +210,7 @@ const ReactiveActions = () => {
})
]);
};
$mount(ReactiveActions, '#demo-reactive');
Mount(ReactiveActions, '#demo-reactive');
```
### Document Actions
@@ -249,7 +249,7 @@ const DocumentActions = () => {
})
]);
};
$mount(DocumentActions, '#demo-document');
Mount(DocumentActions, '#demo-document');
```
### Messaging FAB
@@ -307,7 +307,7 @@ const MessagingFAB = () => {
})
]);
};
$mount(MessagingFAB, '#demo-messaging');
Mount(MessagingFAB, '#demo-messaging');
```
### Flower Style FAB
@@ -337,7 +337,7 @@ const FlowerDemo = () => {
})
]);
};
$mount(FlowerDemo, '#demo-flower');
Mount(FlowerDemo, '#demo-flower');
```
### All Variants
@@ -378,7 +378,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -400,7 +400,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Label
@@ -419,7 +419,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(LabelDemo, labelTarget);
Mount(LabelDemo, labelTarget);
}
// 3. Different Positions
@@ -456,7 +456,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(PositionsDemo, positionsTarget);
Mount(PositionsDemo, positionsTarget);
}
// 4. Color Variants
@@ -494,7 +494,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(ColorsDemo, colorsTarget);
Mount(ColorsDemo, colorsTarget);
}
// 5. Reactive Actions
@@ -533,7 +533,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(ReactiveActions, reactiveTarget);
Mount(ReactiveActions, reactiveTarget);
}
// 6. Document Actions
@@ -565,7 +565,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(DocumentActions, documentTarget);
Mount(DocumentActions, documentTarget);
}
// 7. Messaging FAB
@@ -616,7 +616,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(MessagingFAB, messagingTarget);
Mount(MessagingFAB, messagingTarget);
}
// 8. Flower Style FAB
@@ -639,7 +639,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(FlowerDemo, flowerTarget);
Mount(FlowerDemo, flowerTarget);
}
// 9. All Variants
@@ -673,7 +673,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/fieldset.md
View File

@@ -38,7 +38,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Legend
@@ -80,7 +80,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Address Form
@@ -122,7 +122,7 @@ const AddressDemo = () => {
])
]);
};
$mount(AddressDemo, '#demo-address');
Mount(AddressDemo, '#demo-address');
```
### Payment Method
@@ -163,7 +163,7 @@ const PaymentDemo = () => {
])
]);
};
$mount(PaymentDemo, '#demo-payment');
Mount(PaymentDemo, '#demo-payment');
```
### Preferences Panel
@@ -212,7 +212,7 @@ const PreferencesDemo = () => {
])
]);
};
$mount(PreferencesDemo, '#demo-preferences');
Mount(PreferencesDemo, '#demo-preferences');
```
### Registration Form
@@ -270,7 +270,7 @@ const RegistrationDemo = () => {
])
]);
};
$mount(RegistrationDemo, '#demo-registration');
Mount(RegistrationDemo, '#demo-registration');
```
### All Variants
@@ -296,7 +296,7 @@ const VariantsDemo = () => {
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -318,7 +318,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Reactive Legend
@@ -353,7 +353,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 3. Address Form
@@ -388,7 +388,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(AddressDemo, addressTarget);
Mount(AddressDemo, addressTarget);
}
// 4. Payment Method
@@ -422,7 +422,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(PaymentDemo, paymentTarget);
Mount(PaymentDemo, paymentTarget);
}
// 5. Preferences Panel
@@ -464,7 +464,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(PreferencesDemo, preferencesTarget);
Mount(PreferencesDemo, preferencesTarget);
}
// 6. Registration Form
@@ -515,7 +515,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(RegistrationDemo, registrationTarget);
Mount(RegistrationDemo, registrationTarget);
}
// 7. All Variants
@@ -534,7 +534,7 @@ $mount(VariantsDemo, '#demo-variants');
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/indicator.md
View File

@@ -40,7 +40,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Online Status Indicator
@@ -72,7 +72,7 @@ const StatusDemo = () => {
])
]);
};
$mount(StatusDemo, '#demo-status');
Mount(StatusDemo, '#demo-status');
```
### Reactive Counter
@@ -110,7 +110,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Shopping Cart
@@ -168,7 +168,7 @@ const CartDemo = () => {
))
]);
};
$mount(CartDemo, '#demo-cart');
Mount(CartDemo, '#demo-cart');
```
### Email Inbox
@@ -228,7 +228,7 @@ const InboxDemo = () => {
))
]);
};
$mount(InboxDemo, '#demo-inbox');
Mount(InboxDemo, '#demo-inbox');
```
### Custom Position
@@ -269,7 +269,7 @@ const PositionsDemo = () => {
])
]);
};
$mount(PositionsDemo, '#demo-positions');
Mount(PositionsDemo, '#demo-positions');
```
### All Variants
@@ -300,7 +300,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -323,7 +323,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Online Status Indicator
@@ -348,7 +348,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(StatusDemo, statusTarget);
Mount(StatusDemo, statusTarget);
}
// 3. Reactive Counter
@@ -379,7 +379,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 4. Shopping Cart
@@ -430,7 +430,7 @@ $mount(VariantsDemo, '#demo-variants');
))
]);
};
$mount(CartDemo, cartTarget);
Mount(CartDemo, cartTarget);
}
// 5. Email Inbox
@@ -483,7 +483,7 @@ $mount(VariantsDemo, '#demo-variants');
))
]);
};
$mount(InboxDemo, inboxTarget);
Mount(InboxDemo, inboxTarget);
}
// 6. Custom Position
@@ -517,7 +517,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(PositionsDemo, positionsTarget);
Mount(PositionsDemo, positionsTarget);
}
// 7. All Variants
@@ -541,7 +541,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/input.md
View File

@@ -43,7 +43,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icon
@@ -67,7 +67,7 @@ const IconDemo = () => {
oninput: (e) => email(e.target.value)
});
};
$mount(IconDemo, '#demo-icon');
Mount(IconDemo, '#demo-icon');
```
### Password with Toggle
@@ -90,7 +90,7 @@ const PasswordDemo = () => {
oninput: (e) => password(e.target.value)
});
};
$mount(PasswordDemo, '#demo-password');
Mount(PasswordDemo, '#demo-password');
```
### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
oninput: (e) => username(e.target.value)
});
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Error State
@@ -144,7 +144,7 @@ const ErrorDemo = () => {
oninput: (e) => validate(e.target.value)
});
};
$mount(ErrorDemo, '#demo-error');
Mount(ErrorDemo, '#demo-error');
```
### Disabled State
@@ -164,7 +164,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### All Variants
@@ -201,7 +201,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -220,7 +220,7 @@ $mount(VariantsDemo, '#demo-variants');
oninput: (e) => name(e.target.value)
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Icon
@@ -236,7 +236,7 @@ $mount(VariantsDemo, '#demo-variants');
oninput: (e) => email(e.target.value)
});
};
$mount(IconDemo, iconTarget);
Mount(IconDemo, iconTarget);
}
// 3. Password with Toggle
@@ -251,7 +251,7 @@ $mount(VariantsDemo, '#demo-variants');
oninput: (e) => password(e.target.value)
});
};
$mount(PasswordDemo, passwordTarget);
Mount(PasswordDemo, passwordTarget);
}
// 4. With Tooltip
@@ -266,7 +266,7 @@ $mount(VariantsDemo, '#demo-variants');
oninput: (e) => username(e.target.value)
});
};
$mount(TooltipDemo, tooltipTarget);
Mount(TooltipDemo, tooltipTarget);
}
// 5. Error State
@@ -290,7 +290,7 @@ $mount(VariantsDemo, '#demo-variants');
oninput: (e) => validate(e.target.value)
});
};
$mount(ErrorDemo, errorTarget);
Mount(ErrorDemo, errorTarget);
}
// 6. Disabled State
@@ -303,7 +303,7 @@ $mount(VariantsDemo, '#demo-variants');
disabled: true
});
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 7. All Variants
@@ -333,7 +333,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/list.md
View File

@@ -39,7 +39,7 @@ const BasicDemo = () => {
])
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Header
@@ -69,7 +69,7 @@ const HeaderDemo = () => {
])
});
};
$mount(HeaderDemo, '#demo-header');
Mount(HeaderDemo, '#demo-header');
```
### With Icons
@@ -102,7 +102,7 @@ const IconsDemo = () => {
])
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### With Badges
@@ -134,7 +134,7 @@ const BadgesDemo = () => {
])
});
};
$mount(BadgesDemo, '#demo-badges');
Mount(BadgesDemo, '#demo-badges');
```
### Interactive List
@@ -181,7 +181,7 @@ const InteractiveDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Select a project to see details')
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Reactive List
@@ -254,7 +254,7 @@ const ReactiveDemo = () => {
Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Avatar List
@@ -289,7 +289,7 @@ const AvatarDemo = () => {
])
});
};
$mount(AvatarDemo, '#demo-avatar');
Mount(AvatarDemo, '#demo-avatar');
```
### All Variants
@@ -327,7 +327,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -347,7 +347,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Header
@@ -370,7 +370,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(HeaderDemo, headerTarget);
Mount(HeaderDemo, headerTarget);
}
// 3. With Icons
@@ -396,7 +396,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 4. With Badges
@@ -421,7 +421,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(BadgesDemo, badgesTarget);
Mount(BadgesDemo, badgesTarget);
}
// 5. Interactive List
@@ -461,7 +461,7 @@ $mount(VariantsDemo, '#demo-variants');
: Div({ class: 'alert alert-soft' }, 'Select a project to see details')
]);
};
$mount(InteractiveDemo, interactiveTarget);
Mount(InteractiveDemo, interactiveTarget);
}
// 6. Reactive List
@@ -527,7 +527,7 @@ $mount(VariantsDemo, '#demo-variants');
Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 7. Avatar List
@@ -555,7 +555,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(AvatarDemo, avatarTarget);
Mount(AvatarDemo, avatarTarget);
}
// 8. All Variants
@@ -586,7 +586,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/loading.md
View File

@@ -35,7 +35,7 @@ const BasicDemo = () => {
Loading({ $show: true, class: 'loading-infinity' })
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Loading Sizes
@@ -68,7 +68,7 @@ const SizesDemo = () => {
])
]);
};
$mount(SizesDemo, '#demo-sizes');
Mount(SizesDemo, '#demo-sizes');
```
### Loading Colors
@@ -92,7 +92,7 @@ const ColorsDemo = () => {
Loading({ $show: true, class: 'loading-spinner text-error' })
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### Button Loading State
@@ -124,7 +124,7 @@ const ButtonDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
]);
};
$mount(ButtonDemo, '#demo-button');
Mount(ButtonDemo, '#demo-button');
```
### Async Data Loading
@@ -192,7 +192,7 @@ const AsyncDemo = () => {
])
]);
};
$mount(AsyncDemo, '#demo-async');
Mount(AsyncDemo, '#demo-async');
```
### Full Page Loading
@@ -226,7 +226,7 @@ const FullpageDemo = () => {
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
]);
};
$mount(FullpageDemo, '#demo-fullpage');
Mount(FullpageDemo, '#demo-fullpage');
```
### Conditional Loading
@@ -279,7 +279,7 @@ const ConditionalDemo = () => {
])
]);
};
$mount(ConditionalDemo, '#demo-conditional');
Mount(ConditionalDemo, '#demo-conditional');
```
### All Variants
@@ -323,7 +323,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -343,7 +343,7 @@ $mount(VariantsDemo, '#demo-variants');
Loading({ $show: true, class: 'loading-infinity' })
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Loading Sizes
@@ -369,7 +369,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(SizesDemo, sizesTarget);
Mount(SizesDemo, sizesTarget);
}
// 3. Loading Colors
@@ -386,7 +386,7 @@ $mount(VariantsDemo, '#demo-variants');
Loading({ $show: true, class: 'loading-spinner text-error' })
]);
};
$mount(ColorsDemo, colorsTarget);
Mount(ColorsDemo, colorsTarget);
}
// 4. Button Loading State
@@ -411,7 +411,7 @@ $mount(VariantsDemo, '#demo-variants');
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
]);
};
$mount(ButtonDemo, buttonTarget);
Mount(ButtonDemo, buttonTarget);
}
// 5. Async Data Loading
@@ -472,7 +472,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(AsyncDemo, asyncTarget);
Mount(AsyncDemo, asyncTarget);
}
// 6. Full Page Loading
@@ -499,7 +499,7 @@ $mount(VariantsDemo, '#demo-variants');
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
]);
};
$mount(FullpageDemo, fullpageTarget);
Mount(FullpageDemo, fullpageTarget);
}
// 7. Conditional Loading
@@ -545,7 +545,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ConditionalDemo, conditionalTarget);
Mount(ConditionalDemo, conditionalTarget);
}
// 8. All Variants
@@ -582,7 +582,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/menu.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -104,7 +104,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Nested Menu
@@ -174,7 +174,7 @@ const NestedDemo = () => {
]
});
};
$mount(NestedDemo, '#demo-nested');
Mount(NestedDemo, '#demo-nested');
```
### Horizontal Menu
@@ -219,7 +219,7 @@ const HorizontalDemo = () => {
]
});
};
$mount(HorizontalDemo, '#demo-horizontal');
Mount(HorizontalDemo, '#demo-horizontal');
```
### Sidebar Menu
@@ -282,7 +282,7 @@ const SidebarDemo = () => {
])
]);
};
$mount(SidebarDemo, '#demo-sidebar');
Mount(SidebarDemo, '#demo-sidebar');
```
### Account Menu
@@ -334,7 +334,7 @@ const AccountDemo = () => {
]
});
};
$mount(AccountDemo, '#demo-account');
Mount(AccountDemo, '#demo-account');
```
### Collapsible Sidebar
@@ -372,7 +372,7 @@ const CollapsibleDemo = () => {
])
]);
};
$mount(CollapsibleDemo, '#demo-collapsible');
Mount(CollapsibleDemo, '#demo-collapsible');
```
### All Variants
@@ -410,7 +410,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -443,7 +443,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Icons
@@ -481,7 +481,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 3. Nested Menu
@@ -544,7 +544,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(NestedDemo, nestedTarget);
Mount(NestedDemo, nestedTarget);
}
// 4. Horizontal Menu
@@ -582,7 +582,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(HorizontalDemo, horizontalTarget);
Mount(HorizontalDemo, horizontalTarget);
}
// 5. Sidebar Menu
@@ -638,7 +638,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(SidebarDemo, sidebarTarget);
Mount(SidebarDemo, sidebarTarget);
}
// 6. Account Menu
@@ -683,7 +683,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(AccountDemo, accountTarget);
Mount(AccountDemo, accountTarget);
}
// 7. Collapsible Sidebar
@@ -714,7 +714,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(CollapsibleDemo, collapsibleTarget);
Mount(CollapsibleDemo, collapsibleTarget);
}
// 8. All Variants
@@ -745,7 +745,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/modal.md
View File

@@ -45,7 +45,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Modal with Actions
@@ -95,7 +95,7 @@ const ActionsDemo = () => {
])
]);
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### Form Modal
@@ -164,7 +164,7 @@ const FormModal = () => {
])
]);
};
$mount(FormModal, '#demo-form');
Mount(FormModal, '#demo-form');
```
### Confirmation Modal
@@ -225,7 +225,7 @@ const ConfirmDemo = () => {
])
]);
};
$mount(ConfirmDemo, '#demo-confirm');
Mount(ConfirmDemo, '#demo-confirm');
```
### Large Content Modal
@@ -277,7 +277,7 @@ const LargeDemo = () => {
])
]);
};
$mount(LargeDemo, '#demo-large');
Mount(LargeDemo, '#demo-large');
```
### Multiple Modals
@@ -319,7 +319,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.')
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### Custom Styled Modal
@@ -356,7 +356,7 @@ const CustomDemo = () => {
])
]);
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
<script>
@@ -383,7 +383,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Modal with Actions
@@ -426,7 +426,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(ActionsDemo, actionsTarget);
Mount(ActionsDemo, actionsTarget);
}
// 3. Form Modal
@@ -488,7 +488,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(FormModal, formTarget);
Mount(FormModal, formTarget);
}
// 4. Confirmation Modal
@@ -542,7 +542,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(ConfirmDemo, confirmTarget);
Mount(ConfirmDemo, confirmTarget);
}
// 5. Large Content Modal
@@ -587,7 +587,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(LargeDemo, largeTarget);
Mount(LargeDemo, largeTarget);
}
// 6. Multiple Modals
@@ -622,7 +622,7 @@ $mount(CustomDemo, '#demo-custom');
}, 'Please review your input before proceeding.')
]);
};
$mount(MultipleDemo, multipleTarget);
Mount(MultipleDemo, multipleTarget);
}
// 7. Custom Styled Modal
@@ -652,7 +652,7 @@ $mount(CustomDemo, '#demo-custom');
])
]);
};
$mount(CustomDemo, customTarget);
Mount(CustomDemo, customTarget);
}
};

32
docs/components_old/navbar.md
View File

@@ -38,7 +38,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Navigation Links
@@ -79,7 +79,7 @@ const LinksDemo = () => {
])
]);
};
$mount(LinksDemo, '#demo-links');
Mount(LinksDemo, '#demo-links');
```
### With Dropdown Menu
@@ -120,7 +120,7 @@ const DropdownDemo = () => {
])
]);
};
$mount(DropdownDemo, '#demo-dropdown');
Mount(DropdownDemo, '#demo-dropdown');
```
### With Search
@@ -156,7 +156,7 @@ const SearchDemo = () => {
])
]);
};
$mount(SearchDemo, '#demo-search');
Mount(SearchDemo, '#demo-search');
```
### With Avatar and Dropdown
@@ -195,7 +195,7 @@ const AvatarDemo = () => {
])
]);
};
$mount(AvatarDemo, '#demo-avatar');
Mount(AvatarDemo, '#demo-avatar');
```
### Responsive Navbar
@@ -234,7 +234,7 @@ const ResponsiveDemo = () => {
]) : null
]);
};
$mount(ResponsiveDemo, '#demo-responsive');
Mount(ResponsiveDemo, '#demo-responsive');
```
### With Brand and Actions
@@ -265,7 +265,7 @@ const BrandDemo = () => {
])
]);
};
$mount(BrandDemo, '#demo-brand');
Mount(BrandDemo, '#demo-brand');
```
### All Variants
@@ -300,7 +300,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -323,7 +323,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Navigation Links
@@ -357,7 +357,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(LinksDemo, linksTarget);
Mount(LinksDemo, linksTarget);
}
// 3. With Dropdown Menu
@@ -391,7 +391,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(DropdownDemo, dropdownTarget);
Mount(DropdownDemo, dropdownTarget);
}
// 4. With Search
@@ -420,7 +420,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(SearchDemo, searchTarget);
Mount(SearchDemo, searchTarget);
}
// 5. With Avatar and Dropdown
@@ -452,7 +452,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(AvatarDemo, avatarTarget);
Mount(AvatarDemo, avatarTarget);
}
// 6. Responsive Navbar
@@ -484,7 +484,7 @@ $mount(VariantsDemo, '#demo-variants');
]) : null
]);
};
$mount(ResponsiveDemo, responsiveTarget);
Mount(ResponsiveDemo, responsiveTarget);
}
// 7. With Brand and Actions
@@ -508,7 +508,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(BrandDemo, brandTarget);
Mount(BrandDemo, brandTarget);
}
// 8. All Variants
@@ -536,7 +536,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/radio.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -94,7 +94,7 @@ const TooltipDemo = () => {
})
]);
};
$mount(TooltipDemo, '#demo-tooltip');
Mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -128,7 +128,7 @@ const DisabledDemo = () => {
})
]);
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Preview
@@ -188,7 +188,7 @@ const ReactiveDemo = () => {
}, () => `${size()} ${color()} preview`)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Payment Method Selection
@@ -239,7 +239,7 @@ const PaymentDemo = () => {
})
]);
};
$mount(PaymentDemo, '#demo-payment');
Mount(PaymentDemo, '#demo-payment');
```
### All Variants
@@ -323,7 +323,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Dynamic Options
@@ -394,7 +394,7 @@ const DynamicDemo = () => {
: null
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
<script>
@@ -432,7 +432,7 @@ $mount(DynamicDemo, '#demo-dynamic');
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Tooltip
@@ -460,7 +460,7 @@ $mount(DynamicDemo, '#demo-dynamic');
})
]);
};
$mount(TooltipDemo, tooltipTarget);
Mount(TooltipDemo, tooltipTarget);
}
// 3. Disabled State
@@ -487,7 +487,7 @@ $mount(DynamicDemo, '#demo-dynamic');
})
]);
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 4. Reactive Preview
@@ -540,7 +540,7 @@ $mount(DynamicDemo, '#demo-dynamic');
}, () => `${size()} ${color()} preview`)
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 5. Payment Method Selection
@@ -584,7 +584,7 @@ $mount(DynamicDemo, '#demo-dynamic');
})
]);
};
$mount(PaymentDemo, paymentTarget);
Mount(PaymentDemo, paymentTarget);
}
// 6. All Variants
@@ -661,7 +661,7 @@ $mount(DynamicDemo, '#demo-dynamic');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 7. Dynamic Options
@@ -725,7 +725,7 @@ $mount(DynamicDemo, '#demo-dynamic');
: null
]);
};
$mount(DynamicDemo, dynamicTarget);
Mount(DynamicDemo, dynamicTarget);
}
};

32
docs/components_old/rating.md
View File

@@ -40,7 +40,7 @@ const BasicDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Heart Rating
@@ -66,7 +66,7 @@ const HeartDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
$mount(HeartDemo, '#demo-heart');
Mount(HeartDemo, '#demo-heart');
```
### Star with Outline
@@ -92,7 +92,7 @@ const Star2Demo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
$mount(Star2Demo, '#demo-star2');
Mount(Star2Demo, '#demo-star2');
```
### Read-only Rating
@@ -117,7 +117,7 @@ const ReadonlyDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
$mount(ReadonlyDemo, '#demo-readonly');
Mount(ReadonlyDemo, '#demo-readonly');
```
### Custom Count
@@ -152,7 +152,7 @@ const CustomDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
]);
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### Product Review
@@ -210,7 +210,7 @@ const ReviewDemo = () => {
])
]);
};
$mount(ReviewDemo, '#demo-review');
Mount(ReviewDemo, '#demo-review');
```
### All Variants
@@ -243,7 +243,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Interactive Feedback
@@ -294,7 +294,7 @@ const FeedbackDemo = () => {
: null
]);
};
$mount(FeedbackDemo, '#demo-feedback');
Mount(FeedbackDemo, '#demo-feedback');
```
<script>
@@ -316,7 +316,7 @@ $mount(FeedbackDemo, '#demo-feedback');
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Heart Rating
@@ -335,7 +335,7 @@ $mount(FeedbackDemo, '#demo-feedback');
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
$mount(HeartDemo, heartTarget);
Mount(HeartDemo, heartTarget);
}
// 3. Star with Outline
@@ -354,7 +354,7 @@ $mount(FeedbackDemo, '#demo-feedback');
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
$mount(Star2Demo, star2Target);
Mount(Star2Demo, star2Target);
}
// 4. Read-only Rating
@@ -372,7 +372,7 @@ $mount(FeedbackDemo, '#demo-feedback');
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
$mount(ReadonlyDemo, readonlyTarget);
Mount(ReadonlyDemo, readonlyTarget);
}
// 5. Custom Count
@@ -400,7 +400,7 @@ $mount(FeedbackDemo, '#demo-feedback');
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
]);
};
$mount(CustomDemo, customTarget);
Mount(CustomDemo, customTarget);
}
// 6. Product Review
@@ -451,7 +451,7 @@ $mount(FeedbackDemo, '#demo-feedback');
])
]);
};
$mount(ReviewDemo, reviewTarget);
Mount(ReviewDemo, reviewTarget);
}
// 7. All Variants
@@ -477,7 +477,7 @@ $mount(FeedbackDemo, '#demo-feedback');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 8. Interactive Feedback
@@ -521,7 +521,7 @@ $mount(FeedbackDemo, '#demo-feedback');
: null
]);
};
$mount(FeedbackDemo, feedbackTarget);
Mount(FeedbackDemo, feedbackTarget);
}
};

20
docs/components_old/select.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
onchange: (e) => selected(e.target.value)
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Reactive Display
@@ -76,7 +76,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Disabled State
@@ -101,7 +101,7 @@ const DisabledDemo = () => {
disabled: true
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Dynamic Options
@@ -146,7 +146,7 @@ const DynamicDemo = () => {
})
]);
};
$mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -199,7 +199,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -224,7 +224,7 @@ $mount(VariantsDemo, '#demo-variants');
onchange: (e) => selected(e.target.value)
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Reactive Display
@@ -249,7 +249,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 3. Disabled State
@@ -267,7 +267,7 @@ $mount(VariantsDemo, '#demo-variants');
disabled: true
});
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 4. Dynamic Options
@@ -305,7 +305,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(DynamicDemo, dynamicTarget);
Mount(DynamicDemo, dynamicTarget);
}
// 5. All Variants
@@ -351,7 +351,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/stack.md
View File

@@ -32,7 +32,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
@@ -61,7 +61,7 @@ const CardsDemo = () => {
])
]);
};
$mount(CardsDemo, '#demo-cards');
Mount(CardsDemo, '#demo-cards');
```
### Avatar Stack
@@ -93,7 +93,7 @@ const AvatarsDemo = () => {
])
]);
};
$mount(AvatarsDemo, '#demo-avatars');
Mount(AvatarsDemo, '#demo-avatars');
```
### Image Stack
@@ -119,7 +119,7 @@ const ImagesDemo = () => {
])
]);
};
$mount(ImagesDemo, '#demo-images');
Mount(ImagesDemo, '#demo-images');
```
### Photo Gallery Stack
@@ -151,7 +151,7 @@ const GalleryDemo = () => {
)
]);
};
$mount(GalleryDemo, '#demo-gallery');
Mount(GalleryDemo, '#demo-gallery');
```
### Interactive Stack
@@ -191,7 +191,7 @@ const InteractiveDemo = () => {
])
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Notification Stack
@@ -243,7 +243,7 @@ const NotificationsDemo = () => {
}, 'Clear All')
]);
};
$mount(NotificationsDemo, '#demo-notifications');
Mount(NotificationsDemo, '#demo-notifications');
```
### All Variants
@@ -284,7 +284,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -301,7 +301,7 @@ $mount(VariantsDemo, '#demo-variants');
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Card Stack
@@ -323,7 +323,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(CardsDemo, cardsTarget);
Mount(CardsDemo, cardsTarget);
}
// 3. Avatar Stack
@@ -348,7 +348,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(AvatarsDemo, avatarsTarget);
Mount(AvatarsDemo, avatarsTarget);
}
// 4. Image Stack
@@ -367,7 +367,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ImagesDemo, imagesTarget);
Mount(ImagesDemo, imagesTarget);
}
// 5. Photo Gallery Stack
@@ -392,7 +392,7 @@ $mount(VariantsDemo, '#demo-variants');
)
]);
};
$mount(GalleryDemo, galleryTarget);
Mount(GalleryDemo, galleryTarget);
}
// 6. Interactive Stack
@@ -425,7 +425,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(InteractiveDemo, interactiveTarget);
Mount(InteractiveDemo, interactiveTarget);
}
// 7. Notification Stack
@@ -470,7 +470,7 @@ $mount(VariantsDemo, '#demo-variants');
}, 'Clear All')
]);
};
$mount(NotificationsDemo, notificationsTarget);
Mount(NotificationsDemo, notificationsTarget);
}
// 8. All Variants
@@ -504,7 +504,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/stat.md
View File

@@ -47,7 +47,7 @@ const BasicDemo = () => {
})
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -82,7 +82,7 @@ const IconsDemo = () => {
})
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Reactive Values
@@ -125,7 +125,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### With Trend Indicators
@@ -160,7 +160,7 @@ const TrendsDemo = () => {
})
]);
};
$mount(TrendsDemo, '#demo-trends');
Mount(TrendsDemo, '#demo-trends');
```
### Multiple Stats in Row
@@ -201,7 +201,7 @@ const MultipleDemo = () => {
})
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
### Dashboard Example
@@ -266,7 +266,7 @@ const DashboardDemo = () => {
])
]);
};
$mount(DashboardDemo, '#demo-dashboard');
Mount(DashboardDemo, '#demo-dashboard');
```
### All Variants
@@ -311,7 +311,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Compact Stats
@@ -348,7 +348,7 @@ const CompactDemo = () => {
})
]);
};
$mount(CompactDemo, '#demo-compact');
Mount(CompactDemo, '#demo-compact');
```
<script>
@@ -377,7 +377,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Icons
@@ -405,7 +405,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 3. Reactive Values
@@ -441,7 +441,7 @@ $mount(CompactDemo, '#demo-compact');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 4. With Trend Indicators
@@ -469,7 +469,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(TrendsDemo, trendsTarget);
Mount(TrendsDemo, trendsTarget);
}
// 5. Multiple Stats in Row
@@ -503,7 +503,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(MultipleDemo, multipleTarget);
Mount(MultipleDemo, multipleTarget);
}
// 6. Dashboard Example
@@ -561,7 +561,7 @@ $mount(CompactDemo, '#demo-compact');
])
]);
};
$mount(DashboardDemo, dashboardTarget);
Mount(DashboardDemo, dashboardTarget);
}
// 7. All Variants
@@ -599,7 +599,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 8. Compact Stats
@@ -629,7 +629,7 @@ $mount(CompactDemo, '#demo-compact');
})
]);
};
$mount(CompactDemo, compactTarget);
Mount(CompactDemo, compactTarget);
}
};

32
docs/components_old/swap.md
View File

@@ -38,7 +38,7 @@ const BasicDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Icon Swap
@@ -61,7 +61,7 @@ const IconsDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Emoji Swap
@@ -84,7 +84,7 @@ const EmojiDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(EmojiDemo, '#demo-emoji');
Mount(EmojiDemo, '#demo-emoji');
```
### Custom Content Swap
@@ -107,7 +107,7 @@ const CustomDemo = () => {
onclick: () => isOn(!isOn())
});
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### With Reactive State
@@ -137,7 +137,7 @@ const ReactiveDemo = () => {
)
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Toggle Mode Swap
@@ -188,7 +188,7 @@ const ModeDemo = () => {
])
]);
};
$mount(ModeDemo, '#demo-mode');
Mount(ModeDemo, '#demo-mode');
```
### All Variants
@@ -237,7 +237,7 @@ const VariantsDemo = () => {
])
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
### Simple Todo Toggle
@@ -276,7 +276,7 @@ const TodoDemo = () => {
})
]);
};
$mount(TodoDemo, '#demo-todo');
Mount(TodoDemo, '#demo-todo');
```
<script>
@@ -296,7 +296,7 @@ $mount(TodoDemo, '#demo-todo');
onclick: () => isOn(!isOn())
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Icon Swap
@@ -312,7 +312,7 @@ $mount(TodoDemo, '#demo-todo');
onclick: () => isOn(!isOn())
});
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 3. Emoji Swap
@@ -328,7 +328,7 @@ $mount(TodoDemo, '#demo-todo');
onclick: () => isOn(!isOn())
});
};
$mount(EmojiDemo, emojiTarget);
Mount(EmojiDemo, emojiTarget);
}
// 4. Custom Content Swap
@@ -344,7 +344,7 @@ $mount(TodoDemo, '#demo-todo');
onclick: () => isOn(!isOn())
});
};
$mount(CustomDemo, customTarget);
Mount(CustomDemo, customTarget);
}
// 5. Reactive State
@@ -367,7 +367,7 @@ $mount(TodoDemo, '#demo-todo');
)
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 6. Toggle Mode Swap
@@ -411,7 +411,7 @@ $mount(TodoDemo, '#demo-todo');
])
]);
};
$mount(ModeDemo, modeTarget);
Mount(ModeDemo, modeTarget);
}
// 7. All Variants
@@ -453,7 +453,7 @@ $mount(TodoDemo, '#demo-todo');
])
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
// 8. Simple Todo Toggle
@@ -485,7 +485,7 @@ $mount(TodoDemo, '#demo-todo');
})
]);
};
$mount(TodoDemo, todoTarget);
Mount(TodoDemo, todoTarget);
}
};

32
docs/components_old/table.md
View File

@@ -47,7 +47,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Zebra Stripes
@@ -78,7 +78,7 @@ const ZebraDemo = () => {
zebra: true
});
};
$mount(ZebraDemo, '#demo-zebra');
Mount(ZebraDemo, '#demo-zebra');
```
### With Custom Cell Rendering
@@ -124,7 +124,7 @@ const CustomDemo = () => {
zebra: true
});
};
$mount(CustomDemo, '#demo-custom');
Mount(CustomDemo, '#demo-custom');
```
### With Footers
@@ -172,7 +172,7 @@ const FooterDemo = () => {
zebra: true
});
};
$mount(FooterDemo, '#demo-footer');
Mount(FooterDemo, '#demo-footer');
```
### Empty State
@@ -200,7 +200,7 @@ const EmptyDemo = () => {
])
});
};
$mount(EmptyDemo, '#demo-empty');
Mount(EmptyDemo, '#demo-empty');
```
### Reactive Data
@@ -271,7 +271,7 @@ const ReactiveDemo = () => {
})
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### With Actions
@@ -331,7 +331,7 @@ const ActionsDemo = () => {
zebra: true
});
};
$mount(ActionsDemo, '#demo-actions');
Mount(ActionsDemo, '#demo-actions');
```
### All Variants
@@ -385,7 +385,7 @@ const VariantsDemo = () => {
})
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -412,7 +412,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Zebra Stripes
@@ -436,7 +436,7 @@ $mount(VariantsDemo, '#demo-variants');
zebra: true
});
};
$mount(ZebraDemo, zebraTarget);
Mount(ZebraDemo, zebraTarget);
}
// 3. With Custom Cell Rendering
@@ -475,7 +475,7 @@ $mount(VariantsDemo, '#demo-variants');
zebra: true
});
};
$mount(CustomDemo, customTarget);
Mount(CustomDemo, customTarget);
}
// 4. With Footers
@@ -516,7 +516,7 @@ $mount(VariantsDemo, '#demo-variants');
zebra: true
});
};
$mount(FooterDemo, footerTarget);
Mount(FooterDemo, footerTarget);
}
// 5. Empty State
@@ -537,7 +537,7 @@ $mount(VariantsDemo, '#demo-variants');
])
});
};
$mount(EmptyDemo, emptyTarget);
Mount(EmptyDemo, emptyTarget);
}
// 6. Reactive Data
@@ -601,7 +601,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 7. With Actions
@@ -654,7 +654,7 @@ $mount(VariantsDemo, '#demo-variants');
zebra: true
});
};
$mount(ActionsDemo, actionsTarget);
Mount(ActionsDemo, actionsTarget);
}
// 8. All Variants
@@ -701,7 +701,7 @@ $mount(VariantsDemo, '#demo-variants');
})
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

28
docs/components_old/tabs.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
]
});
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -101,7 +101,7 @@ const IconsDemo = () => {
]
});
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### With Tooltips
@@ -143,7 +143,7 @@ const TooltipsDemo = () => {
]
});
};
$mount(TooltipsDemo, '#demo-tooltips');
Mount(TooltipsDemo, '#demo-tooltips');
```
### Disabled Tab
@@ -182,7 +182,7 @@ const DisabledDemo = () => {
]
});
};
$mount(DisabledDemo, '#demo-disabled');
Mount(DisabledDemo, '#demo-disabled');
```
### Reactive Content
@@ -228,7 +228,7 @@ const ReactiveDemo = () => {
]
});
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Tabs
@@ -330,7 +330,7 @@ const FormTabs = () => {
])
]);
};
$mount(FormTabs, '#demo-form');
Mount(FormTabs, '#demo-form');
```
### All Variants
@@ -365,7 +365,7 @@ const VariantsDemo = () => {
Tabs({ items, class: 'tabs-lifted' })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -401,7 +401,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. With Icons
@@ -433,7 +433,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 3. With Tooltips
@@ -468,7 +468,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(TooltipsDemo, tooltipsTarget);
Mount(TooltipsDemo, tooltipsTarget);
}
// 4. Disabled Tab
@@ -500,7 +500,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(DisabledDemo, disabledTarget);
Mount(DisabledDemo, disabledTarget);
}
// 5. Reactive Content
@@ -539,7 +539,7 @@ $mount(VariantsDemo, '#demo-variants');
]
});
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 6. Form Tabs
@@ -634,7 +634,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(FormTabs, formTarget);
Mount(FormTabs, formTarget);
}
// 7. All Variants
@@ -662,7 +662,7 @@ $mount(VariantsDemo, '#demo-variants');
Tabs({ items, class: 'tabs-lifted' })
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/timeline.md
View File

@@ -48,7 +48,7 @@ const BasicDemo = () => {
return Timeline({ items: events });
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Horizontal Timeline
@@ -76,7 +76,7 @@ const HorizontalDemo = () => {
class: 'min-w-[600px]'
});
};
$mount(HorizontalDemo, '#demo-horizontal');
Mount(HorizontalDemo, '#demo-horizontal');
```
### Compact Timeline
@@ -102,7 +102,7 @@ const CompactDemo = () => {
compact: true
});
};
$mount(CompactDemo, '#demo-compact');
Mount(CompactDemo, '#demo-compact');
```
### Custom Icons
@@ -125,7 +125,7 @@ const IconsDemo = () => {
return Timeline({ items: milestones });
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Reactive Timeline
@@ -179,7 +179,7 @@ const ReactiveDemo = () => {
])
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, '#demo-reactive');
```
### Order Status Tracker
@@ -221,7 +221,7 @@ const OrderDemo = () => {
))
]);
};
$mount(OrderDemo, '#demo-order');
Mount(OrderDemo, '#demo-order');
```
### Company History
@@ -276,7 +276,7 @@ const HistoryDemo = () => {
return Timeline({ items: milestones });
};
$mount(HistoryDemo, '#demo-history');
Mount(HistoryDemo, '#demo-history');
```
### All Variants
@@ -307,7 +307,7 @@ const VariantsDemo = () => {
Timeline({ items: sampleItems, compact: true })
]);
};
$mount(VariantsDemo, '#demo-variants');
Mount(VariantsDemo, '#demo-variants');
```
<script>
@@ -328,7 +328,7 @@ $mount(VariantsDemo, '#demo-variants');
return Timeline({ items: events });
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Horizontal Timeline
@@ -349,7 +349,7 @@ $mount(VariantsDemo, '#demo-variants');
class: 'min-w-[600px]'
});
};
$mount(HorizontalDemo, horizontalTarget);
Mount(HorizontalDemo, horizontalTarget);
}
// 3. Compact Timeline
@@ -368,7 +368,7 @@ $mount(VariantsDemo, '#demo-variants');
compact: true
});
};
$mount(CompactDemo, compactTarget);
Mount(CompactDemo, compactTarget);
}
// 4. Custom Icons
@@ -384,7 +384,7 @@ $mount(VariantsDemo, '#demo-variants');
return Timeline({ items: milestones });
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 5. Reactive Timeline
@@ -431,7 +431,7 @@ $mount(VariantsDemo, '#demo-variants');
])
]);
};
$mount(ReactiveDemo, reactiveTarget);
Mount(ReactiveDemo, reactiveTarget);
}
// 6. Order Status Tracker
@@ -466,7 +466,7 @@ $mount(VariantsDemo, '#demo-variants');
))
]);
};
$mount(OrderDemo, orderTarget);
Mount(OrderDemo, orderTarget);
}
// 7. Company History
@@ -514,7 +514,7 @@ $mount(VariantsDemo, '#demo-variants');
return Timeline({ items: milestones });
};
$mount(HistoryDemo, historyTarget);
Mount(HistoryDemo, historyTarget);
}
// 8. All Variants
@@ -538,7 +538,7 @@ $mount(VariantsDemo, '#demo-variants');
Timeline({ items: sampleItems, compact: true })
]);
};
$mount(VariantsDemo, variantsTarget);
Mount(VariantsDemo, variantsTarget);
}
};

32
docs/components_old/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,7 +339,7 @@ const MultipleDemo = () => {
}, 'Show Multiple Toasts')
]);
};
$mount(MultipleDemo, '#demo-multiple');
Mount(MultipleDemo, '#demo-multiple');
```
<script>
@@ -369,7 +369,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, 'Error Toast')
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Different Durations
@@ -395,7 +395,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, '8 Seconds')
]);
};
$mount(DurationDemo, durationTarget);
Mount(DurationDemo, durationTarget);
}
// 3. Interactive Toast
@@ -426,7 +426,7 @@ $mount(MultipleDemo, '#demo-multiple');
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
$mount(InteractiveDemo, interactiveTarget);
Mount(InteractiveDemo, interactiveTarget);
}
// 4. Form Validation Toast
@@ -478,7 +478,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, 'Login')
]);
};
$mount(FormToastDemo, formTarget);
Mount(FormToastDemo, formTarget);
}
// 5. Success Feedback
@@ -524,7 +524,7 @@ $mount(MultipleDemo, '#demo-multiple');
))
]);
};
$mount(FeedbackDemo, feedbackTarget);
Mount(FeedbackDemo, feedbackTarget);
}
// 6. Error Handling
@@ -564,7 +564,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, 'Timeout')
]);
};
$mount(ErrorDemo, errorTarget);
Mount(ErrorDemo, errorTarget);
}
// 7. Custom Messages
@@ -594,7 +594,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, 'Security Alert')
]);
};
$mount(CustomDemo, customTarget);
Mount(CustomDemo, customTarget);
}
// 8. Multiple Toasts
@@ -615,7 +615,7 @@ $mount(MultipleDemo, '#demo-multiple');
}, 'Show Multiple Toasts')
]);
};
$mount(MultipleDemo, multipleTarget);
Mount(MultipleDemo, multipleTarget);
}
};

32
docs/components_old/tooltip.md
View File

@@ -39,7 +39,7 @@ const BasicDemo = () => {
])
]);
};
$mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, '#demo-basic');
```
### Tooltip Positions
@@ -68,7 +68,7 @@ const PositionsDemo = () => {
])
]);
};
$mount(PositionsDemo, '#demo-positions');
Mount(PositionsDemo, '#demo-positions');
```
### Tooltip with Icons
@@ -97,7 +97,7 @@ const IconsDemo = () => {
])
]);
};
$mount(IconsDemo, '#demo-icons');
Mount(IconsDemo, '#demo-icons');
```
### Form Field Tooltips
@@ -140,7 +140,7 @@ const FormDemo = () => {
])
]);
};
$mount(FormDemo, '#demo-form');
Mount(FormDemo, '#demo-form');
```
### Interactive Tooltip
@@ -183,7 +183,7 @@ const InteractiveDemo = () => {
])
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Mount(InteractiveDemo, '#demo-interactive');
```
### Rich Tooltip Content
@@ -222,7 +222,7 @@ const RichDemo = () => {
])
]);
};
$mount(RichDemo, '#demo-rich');
Mount(RichDemo, '#demo-rich');
```
### Color Variants
@@ -260,7 +260,7 @@ const ColorsDemo = () => {
])
]);
};
$mount(ColorsDemo, '#demo-colors');
Mount(ColorsDemo, '#demo-colors');
```
### All Tooltip Positions
@@ -302,7 +302,7 @@ const AllPositionsDemo = () => {
])
]);
};
$mount(AllPositionsDemo, '#demo-all-positions');
Mount(AllPositionsDemo, '#demo-all-positions');
```
<script>
@@ -325,7 +325,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(BasicDemo, basicTarget);
Mount(BasicDemo, basicTarget);
}
// 2. Tooltip Positions
@@ -347,7 +347,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(PositionsDemo, positionsTarget);
Mount(PositionsDemo, positionsTarget);
}
// 3. Tooltip with Icons
@@ -369,7 +369,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(IconsDemo, iconsTarget);
Mount(IconsDemo, iconsTarget);
}
// 4. Form Field Tooltips
@@ -405,7 +405,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(FormDemo, formTarget);
Mount(FormDemo, formTarget);
}
// 5. Interactive Tooltip
@@ -441,7 +441,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(InteractiveDemo, interactiveTarget);
Mount(InteractiveDemo, interactiveTarget);
}
// 6. Rich Tooltip Content
@@ -473,7 +473,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(RichDemo, richTarget);
Mount(RichDemo, richTarget);
}
// 7. Color Variants
@@ -504,7 +504,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(ColorsDemo, colorsTarget);
Mount(ColorsDemo, colorsTarget);
}
// 8. All Tooltip Positions
@@ -539,7 +539,7 @@ $mount(AllPositionsDemo, '#demo-all-positions');
])
]);
};
$mount(AllPositionsDemo, allPositionsTarget);
Mount(AllPositionsDemo, allPositionsTarget);
}
};

2
docs/index.html
View File

@@ -56,7 +56,7 @@
// 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',
// Como tu librería ya puso $, Mount, Button, etc. en 'window',
// el código los encontrará directamente.
const runDemo = new Function(code.innerText);
runDemo();

28
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 $html('div', { class: 'p-8 max-w-md mx-auto' }, [
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return Tag('div', { class: 'p-8 max-w-md mx-auto' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
placeholder: 'Enter your name...'
@@ -50,7 +50,7 @@ const App = () => {
};
// Mount your app
$mount(App, "#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 $html('div', { class: 'max-w-md mx-auto p-4' }, [
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return Tag('div', { class: 'max-w-md mx-auto p-4' }, [
Tag('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
- `$html()` - Create HTML elements with reactivity
- `$if()` - Conditional rendering
- `$for()` - List rendering
- `$router()` - Hash-based routing
- `$mount()` - Mount components to DOM
- `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
>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))
If(() => userData(), () => Alert({ type: "success" }, userData()?.name))
```
### Modal with Confirm Action

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

File diff suppressed because one or more lines are too long

2
docs/sigpro.css
View File

File diff suppressed because one or more lines are too long

10
src/components/Accordion.js
View File

@@ -1,5 +1,5 @@
// components/Accordion.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -14,16 +14,16 @@ import { ui, val } from "../core/utils.js";
export const Accordion = (props, children) => {
const { class: className, title, name, open, ...rest } = props;
return $html("div", {
return Tag("div", {
...rest,
class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
}, [
$html("input", {
Tag("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),
Tag("div", { class: "collapse-title text-xl font-medium" }, title),
Tag("div", { class: "collapse-content" }, children),
]);
};

10
src/components/Alert.js
View File

@@ -1,5 +1,5 @@
// components/Alert.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**
@@ -26,16 +26,16 @@ export const Alert = (props, children) => {
const content = children || props.message;
return $html("div", {
return Tag("div", {
...rest,
role: "alert",
class: ui('alert', allClasses),
}, () => [
getIcon(iconMap[type]),
$html("div", { class: "flex-1" }, [
$html("span", {}, [typeof content === "function" ? content() : content])
Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content])
]),
actions ? $html("div", { class: "flex-none" }, [
actions ? Tag("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions
]) : null,
].filter(Boolean));

14
src/components/Autocomplete.js
View File

@@ -1,5 +1,5 @@
// components/Autocomplete.js
import { $, $html, $for } from "../sigpro.js";
import { $, Tag, For } from "../sigpro.js";
import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js";
@@ -58,7 +58,7 @@ export const Autocomplete = (props) => {
}
};
return $html("div", { class: 'relative w-full' }, [
return Tag("div", { class: 'relative w-full' }, [
Input({
label,
class: className,
@@ -76,18 +76,18 @@ export const Autocomplete = (props) => {
},
...rest,
}),
$html(
Tag(
"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(
For(
list,
(opt, i) =>
$html("li", {}, [
$html(
Tag("li", {}, [
Tag(
"a",
{
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
@@ -99,7 +99,7 @@ export const Autocomplete = (props) => {
]),
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
),
() => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
],
),
]);

4
src/components/Badge.js
View File

@@ -1,5 +1,5 @@
// components/Badge.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -14,7 +14,7 @@ import { ui } from "../core/utils.js";
export const Badge = (props, children) => {
const { class: className, ...rest } = props;
return $html("span", {
return Tag("span", {
...rest,
class: ui('badge', className),
}, children);

6
src/components/Button.js
View File

@@ -1,5 +1,5 @@
// components/Button.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, val, getIcon } from "../core/utils.js";
/**
@@ -18,12 +18,12 @@ export const Button = (props, children) => {
const iconEl = getIcon(icon);
return $html("button", {
return Tag("button", {
...rest,
class: ui('btn', className),
disabled: () => val(loading) || val(props.disabled),
}, () => [
val(loading) && $html("span", { class: "loading loading-spinner" }),
val(loading) && Tag("span", { class: "loading loading-spinner" }),
iconEl,
children
].filter(Boolean));

10
src/components/Checkbox.js
View File

@@ -1,5 +1,5 @@
// components/Checkbox.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -16,17 +16,17 @@ import { val, ui } from "../core/utils.js";
export const Checkbox = (props) => {
const { class: className, value, tooltip, toggle, label, ...rest } = props;
const checkEl = $html("input", {
const checkEl = Tag("input", {
...rest,
type: "checkbox",
class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
checked: value
});
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
checkEl,
label ? $html("span", { class: "label-text" }, label) : null,
label ? Tag("span", { class: "label-text" }, label) : null,
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

22
src/components/Colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js
import { $, $html, $if } from "../sigpro.js";
import { $, Tag, If } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000";
return $html("div", { class: ui('relative w-fit', className) }, [
$html(
return Tag("div", { class: ui('relative w-fit', className) }, [
Tag(
"button",
{
type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
...rest,
},
[
$html("div", {
Tag("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,
label ? Tag("span", { class: "opacity-80" }, label) : null,
],
),
$if(isOpen, () =>
$html(
If(isOpen, () =>
Tag(
"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(
Tag(
"div",
{ class: "grid grid-cols-8 gap-1" },
palette.map((c) =>
$html("button", {
Tag("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
),
),
$if(isOpen, () =>
$html("div", {
If(isOpen, () =>
Tag("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false),
}),

46
src/components/Datepicker.js
View File

@@ -1,5 +1,5 @@
// components/Datepicker.js
import { $, $html, $if } from "../sigpro.js";
import { $, Tag, If } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";
@@ -99,9 +99,9 @@ export const Datepicker = (props) => {
};
const HourSlider = ({ value: hVal, onChange }) => {
return $html("div", { class: "flex-1" }, [
$html("div", { class: "flex gap-2 items-center" }, [
$html("input", {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
type: "range",
min: 0,
max: 23,
@@ -112,14 +112,14 @@ export const Datepicker = (props) => {
onChange(newHour);
},
}),
$html("span", { class: "text-sm font-mono min-w-[48px] text-center" },
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(val(hVal)).padStart(2, "0") + ":00"
),
]),
]);
};
return $html("div", { class: ui('relative w-full', className) }, [
return Tag("div", { class: ui('relative w-full', className) }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -133,38 +133,38 @@ export const Datepicker = (props) => {
...rest,
}),
$if(isOpen, () =>
$html(
If(isOpen, () =>
Tag(
"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) },
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
getIcon("icon-[lucide--chevrons-left]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
getIcon("icon-[lucide--chevron-left]")
),
]),
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
Tag("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) },
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
getIcon("icon-[lucide--chevron-right]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
getIcon("icon-[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)),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
() => {
const d = internalDate();
const year = d.getFullYear();
@@ -174,14 +174,14 @@ export const Datepicker = (props) => {
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 = 0; i < offset; i++) nodes.push(Tag("div"));
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
nodes.push(
$html(
Tag(
"button",
{
type: "button",
@@ -218,9 +218,9 @@ export const Datepicker = (props) => {
},
]),
hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode()
? $html("div", { class: "flex gap-4" }, [
? Tag("div", { class: "flex gap-4" }, [
HourSlider({
value: startHour,
onChange: (newHour) => {
@@ -253,6 +253,6 @@ export const Datepicker = (props) => {
),
),
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]);
};

14
src/components/Drawer.js
View File

@@ -1,5 +1,5 @@
// components/Drawer.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -14,11 +14,11 @@ export const Drawer = (props, children) => {
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return $html("div", {
return Tag("div", {
...rest,
class: ui('drawer', className),
}, [
$html("input", {
Tag("input", {
id: drawerId,
type: "checkbox",
class: "drawer-toggle",
@@ -27,18 +27,18 @@ export const Drawer = (props, children) => {
if (typeof open === "function") open(e.target.checked);
}
}),
$html("div", { class: "drawer-content" }, [
Tag("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content
]),
$html("div", { class: "drawer-side" }, [
$html("label", {
Tag("div", { class: "drawer-side" }, [
Tag("label", {
for: drawerId,
class: "drawer-overlay",
onclick: () => {
if (typeof open === "function") open(false);
}
}),
$html("div", { class: "min-h-full bg-base-200 w-80" }, [
Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
typeof side === "function" ? side() : side
])
])

16
src/components/Dropdown.js
View File

@@ -1,5 +1,5 @@
// components/Dropdown.js
// import { $html, $for, $watch } from "../sigpro.js";
// import { Tag, For, Watch } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -28,11 +28,11 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
export const Dropdown = (props) => {
const { class: className, label, icon, items, ...rest } = props;
return $html("details", {
return Tag("details", {
...rest,
class: ui('dropdown', className),
}, [
$html("summary", {
Tag("summary", {
class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
style: "display: inline-flex;",
onclick: (e) => {
@@ -48,15 +48,15 @@ export const Dropdown = (props) => {
() => icon ? (typeof icon === "function" ? icon() : icon) : null,
() => label ? (typeof label === "function" ? label() : label) : null
]),
$html("ul", {
Tag("ul", {
tabindex: "-1",
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [
() => {
const currentItems = typeof items === "function" ? items() : (items || []);
return currentItems.map(item =>
$html("li", {}, [
$html("a", {
Tag("li", {}, [
Tag("a", {
class: item.class || "",
onclick: (e) => {
if (item.onclick) item.onclick(e);
@@ -67,8 +67,8 @@ export const Dropdown = (props) => {
}
}
}, [
item.icon ? $html("span", {}, item.icon) : null,
$html("span", {}, item.label)
item.icon ? Tag("span", {}, item.icon) : null,
Tag("span", {}, item.label)
])
])
);

12
src/components/Fab.js
View File

@@ -1,5 +1,5 @@
// components/Fab.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**
@@ -16,14 +16,14 @@ import { val, ui, getIcon } from "../core/utils.js";
export const Fab = (props) => {
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return $html(
return Tag(
"div",
{
...rest,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
},
[
$html(
Tag(
"div",
{
tabindex: 0,
@@ -37,9 +37,9 @@ export const Fab = (props) => {
),
...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(
Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? Tag("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
Tag(
"button",
{
type: "button",

6
src/components/Fieldset.js
View File

@@ -1,5 +1,5 @@
// components/Fieldset.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -13,7 +13,7 @@ import { val, ui } from "../core/utils.js";
export const Fieldset = (props, children) => {
const { class: className, legend, ...rest } = props;
return $html(
return Tag(
"fieldset",
{
...rest,
@@ -22,7 +22,7 @@ export const Fieldset = (props, children) => {
[
() => {
const legendText = val(legend);
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
return legendText ? Tag("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
},
children,
],

36
src/components/Fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js
import { $, $html, $if, $for } from "../sigpro.js";
import { $, Tag, If, For } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**
@@ -47,15 +47,15 @@ export const Fileinput = (props) => {
onSelect?.(updated);
};
return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
$html(
return Tag("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
Tag(
"div",
{
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
"data-tip": tooltip,
},
[
$html(
Tag(
"label",
{
class: () => `
@@ -76,12 +76,12 @@ export const Fileinput = (props) => {
},
},
[
$html("div", { class: "flex items-center gap-3 w-full" }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [
getIcon("icon-[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`),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
]),
$html("input", {
Tag("input", {
type: "file",
multiple: true,
accept: accept,
@@ -93,22 +93,22 @@ export const Fileinput = (props) => {
],
),
() => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
() => (error() ? Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
$if(
If(
() => selectedFiles().length > 0,
() =>
$html("ul", { class: "mt-2 space-y-1" }, [
$for(
Tag("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)`),
Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
Tag("div", { class: "flex items-center gap-2 truncate" }, [
Tag("span", { class: "opacity-50" }, "📄"),
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
]),
$html(
Tag(
"button",
{
type: "button",

6
src/components/Indicator.js
View File

@@ -1,5 +1,5 @@
// components/Indicator.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -15,12 +15,12 @@ import { ui } from "../core/utils.js";
export const Indicator = (props, children) => {
const { value, class: className, ...rest } = props;
return $html("div", {
return Tag("div", {
...rest,
class: "indicator"
}, () => [
// El indicador debe ir PRIMERO (antes que el children)
value ? $html("span", {
value ? Tag("span", {
class: ui('indicator-item badge', className)
}, () => typeof value === "function" ? value() : value) : null,
children

12
src/components/Input.js
View File

@@ -1,5 +1,5 @@
// components/Input.js
import { $, $html, $watch } from "../sigpro.js";
import { $, Tag, Watch } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**
@@ -71,7 +71,7 @@ export const Input = (props) => {
return classes.trim();
};
const inputElement = $html("input", {
const inputElement = Tag("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: placeholder || " ",
@@ -82,15 +82,15 @@ export const Input = (props) => {
"aria-invalid": () => hasError() ? "true" : "false",
});
return $html(
return Tag(
"div",
{ class: "relative w-full" },
() => [
inputElement,
leftIcon ? $html("div", {
leftIcon ? Tag("div", {
class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60",
}, leftIcon) : null,
isPassword ? $html("button", {
isPassword ? Tag("button", {
type: "button",
class: ui(
"absolute right-3 inset-y-0 flex items-center",
@@ -102,7 +102,7 @@ export const Input = (props) => {
visible(!visible());
}
}, () => getPasswordIcon()) : null,
$html("div", {
Tag("div", {
class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0",
}, () => hasError() ? errorMsg() : null),
]

14
src/components/Label.js
View File

@@ -1,5 +1,5 @@
// components/Label.js
import { $, $html } from "../sigpro.js";
import { $, Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -13,16 +13,16 @@ export const Label = (props) => {
const { children, value, floating = false, error, required, class: className, ...rest } = props;
if (floating) {
return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? $html("span", {}, value) : null,
return Tag("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? Tag("span", {}, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null,
]);
}
return $html("label", { class: ui("input w-full", className), ...rest }, () => [
value ? $html("span", { class: "label" }, value) : null,
return Tag("label", { class: ui("input w-full", className), ...rest }, () => [
value ? Tag("span", { class: "label" }, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null,
]);
};

10
src/components/List.js
View File

@@ -1,5 +1,5 @@
// components/List.js
import { $html, $if, $for } from "../sigpro.js";
import { Tag, If, For } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -14,14 +14,14 @@ import { ui, val } from "../core/utils.js";
export const List = (props) => {
const { class: className, items, header, render, keyFn = (item, index) => item.id ?? index, ...rest } = props;
const listItems = $for(
const listItems = For(
items,
(item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
(item, index) => Tag("li", { class: "list-row" }, [render(item, index)]),
keyFn
);
return $html("ul", {
return Tag("ul", {
...rest,
class: ui('list bg-base-100 rounded-box shadow-md', className),
}, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
}, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
};

18
src/components/Menu.js
View File

@@ -1,5 +1,5 @@
// components/Menu.js
import { $html, $for } from "../sigpro.js";
import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,22 +15,22 @@ export const Menu = (props) => {
const { class: className, items, ...rest } = props;
const renderItems = (items) =>
$for(
For(
() => items || [],
(it) =>
$html("li", {}, [
Tag("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)),
? Tag("details", { open: it.open }, [
Tag("summary", {}, [it.icon && Tag("span", { class: "mr-2" }, it.icon), it.label]),
Tag("ul", {}, renderItems(it.children)),
])
: $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
it.icon && $html("span", { class: "mr-2" }, it.icon),
: Tag("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
it.icon && Tag("span", { class: "mr-2" }, it.icon),
it.label,
]),
]),
(it, i) => it.label || i,
);
return $html("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
return Tag("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
};

20
src/components/Modal.js
View File

@@ -1,5 +1,5 @@
// components/Modal.js
import { $html, $watch } from "../sigpro.js";
import { Tag, Watch } from "../sigpro.js";
import { ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";
@@ -28,13 +28,13 @@ export const Modal = (props, children) => {
}
};
$watch(() => handleOpen());
Watch(() => handleOpen());
const close = () => {
if (typeof open === "function") open(false);
};
return $html("dialog", {
return Tag("dialog", {
...rest,
ref: (el) => {
dialogElement = el;
@@ -44,22 +44,22 @@ export const Modal = (props, children) => {
onclose: close,
oncancel: close
}, [
$html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, () =>
Tag("div", { class: "modal-box" }, [
title ? Tag("h3", { class: "text-lg font-bold mb-4" }, () =>
typeof title === "function" ? title() : title
) : null,
$html("div", { class: "py-2" }, [
Tag("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
$html("div", { class: "modal-action" }, [
$html("form", { method: "dialog", class: "flex gap-2" }, [
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")())
])
])
]),
$html("form", { method: "dialog", class: "modal-backdrop" }, [
$html("button", {}, "close")
Tag("form", { method: "dialog", class: "modal-backdrop" }, [
Tag("button", {}, "close")
])
]);
};

4
src/components/Navbar.js
View File

@@ -1,5 +1,5 @@
// components/Navbar.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -12,5 +12,5 @@ import { ui } from "../core/utils.js";
export const Navbar = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
return Tag("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
};

10
src/components/Radio.js
View File

@@ -1,5 +1,5 @@
// components/Radio.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ import { val, ui } from "../core/utils.js";
export const Radio = (props) => {
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
const radioEl = $html("input", {
const radioEl = Tag("input", {
...rest,
type: "radio",
name: name,
@@ -28,10 +28,10 @@ export const Radio = (props) => {
if (!label && !tooltip) return radioEl;
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
radioEl,
label ? $html("span", { class: "label-text" }, label) : null,
label ? Tag("span", { class: "label-text" }, label) : null,
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

10
src/components/Range.js
View File

@@ -1,5 +1,5 @@
// components/Range.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ import { val, ui } from "../core/utils.js";
export const Range = (props) => {
const {class: className, label, tooltip, value, ...rest } = props;
const rangeEl = $html("input", {
const rangeEl = Tag("input", {
...rest,
type: "range",
class: ui('range', className),
@@ -25,10 +25,10 @@ export const Range = (props) => {
if (!label && !tooltip) return rangeEl;
const layout = $html("div", { class: "flex flex-col gap-2" }, [
label ? $html("span", { class: "label-text" }, label) : null,
const layout = Tag("div", { class: "flex flex-col gap-2" }, [
label ? Tag("span", { class: "label-text" }, label) : null,
rangeEl
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

6
src/components/Rating.js
View File

@@ -1,5 +1,5 @@
// components/Rating.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ export const Rating = (props) => {
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
return $html(
return Tag(
"div",
{
...rest,
@@ -23,7 +23,7 @@ export const Rating = (props) => {
},
Array.from({ length: val(count) }, (_, i) => {
const starValue = i + 1;
return $html("input", {
return Tag("input", {
type: "radio",
name: ratingGroup,
class: `mask ${mask}`,

12
src/components/Select.js
View File

@@ -1,5 +1,5 @@
// components/Select.js
import { $html, $for } from "../sigpro.js";
import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -14,17 +14,17 @@ import { val, ui } from "../core/utils.js";
export const Select = (props) => {
const { class: className, label, items, value, ...rest } = props;
const selectEl = $html(
const selectEl = Tag(
"select",
{
...rest,
class: ui('select select-bordered w-full', className),
value: value
},
$for(
For(
() => val(items) || [],
(opt) =>
$html(
Tag(
"option",
{
value: opt.value,
@@ -38,8 +38,8 @@ export const Select = (props) => {
if (!label) return selectEl;
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
$html("span", {}, label),
return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
Tag("span", {}, label),
selectEl
]);
};

4
src/components/Stack.js
View File

@@ -1,5 +1,5 @@
// components/Stack.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -11,5 +11,5 @@ import { ui } from "../core/utils.js";
export const Stack = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui('stack', className) }, children);
return Tag("div", { ...rest, class: ui('stack', className) }, children);
};

12
src/components/Stat.js
View File

@@ -1,5 +1,5 @@
// components/Stat.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -12,10 +12,10 @@ import { val, ui } from "../core/utils.js";
export const Stat = (props) => {
const { class: className, icon, label, value, desc, ...rest } = props;
return $html("div", { ...rest, class: ui('stat', className) }, [
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),
return Tag("div", { ...rest, class: ui('stat', className) }, [
icon && Tag("div", { class: "stat-figure text-secondary" }, icon),
label && Tag("div", { class: "stat-title" }, label),
Tag("div", { class: "stat-value" }, () => val(value) ?? value),
desc && Tag("div", { class: "stat-desc" }, desc),
]);
};

Some files were not shown because too many files have changed in this diff Show More