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

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

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

36
docs/components/colorpicker.md
View File

@@ -61,16 +61,16 @@ mount(BasicDemo, '#demo-basic');
const PreviewDemo = () => {
const color = $('#10b981');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
return div({ class: 'flex flex-col gap-4 w-full' }, [
Colorpicker({
label: 'Choose color',
value: color
}),
Div({
div({
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
style: () => `background-color: ${color()}`
}, [
Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
])
]);
};
@@ -96,20 +96,20 @@ const PaletteDemo = () => {
'#ec489a', '#f43f5e', '#6b7280', '#1f2937'
];
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Colorpicker({
label: 'Custom color',
value: selectedColor
}),
Div({ class: 'divider text-xs' }, 'Or choose from palette'),
Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color =>
Button({
div({ class: 'divider text-xs' }, 'Or choose from palette'),
div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color =>
button({
class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
style: `background-color: ${color}`,
onclick: () => selectedColor(color)
})
)),
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
mount(PaletteDemo, '#demo-palette');
@@ -129,8 +129,8 @@ const TextDemo = () => {
const bgColor = $('#1e293b');
const textColor = $('#f8fafc');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex gap-4' }, [
return div({ class: 'flex flex-col gap-4 w-full' }, [
div({ class: 'flex gap-4' }, [
Colorpicker({
label: 'Background',
value: bgColor
@@ -140,7 +140,7 @@ const TextDemo = () => {
value: textColor
})
]),
Div({
div({
class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
style: () => `background-color: ${bgColor()}; color: ${textColor()}`
}, [
@@ -162,7 +162,7 @@ mount(TextDemo, '#demo-text');
```javascript
const VariantsDemo = () => {
return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
return div({ class: 'flex flex-wrap gap-4 items-center' }, [
Colorpicker({
label: 'Primary',
value: $('#3b82f6')
@@ -199,22 +199,22 @@ const DynamicDemo = () => {
const secondary = $('#ef4444');
const accent = $('#10b981');
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Div({ class: 'flex flex-wrap gap-4' }, [
return div({ class: 'flex flex-col gap-4 w-full' }, [
div({ class: 'flex flex-wrap gap-4' }, [
Colorpicker({ label: 'Primary', value: primary }),
Colorpicker({ label: 'Secondary', value: secondary }),
Colorpicker({ label: 'Accent', value: accent })
]),
Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
Div({
div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
style: () => `background-color: ${primary()}`
}, 'Primary'),
Div({
div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
style: () => `background-color: ${secondary()}`
}, 'Secondary'),
Div({
div({
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
style: () => `background-color: ${accent()}`
}, 'Accent')