New docs
This commit is contained in:
382
docs/components/colorpicker.md
Normal file
382
docs/components/colorpicker.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# Colorpicker
|
||||
|
||||
Color picker component with preset color palette, reactive value binding, and customizable appearance.
|
||||
|
||||
## Tag
|
||||
|
||||
`Colorpicker`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the button |
|
||||
| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Colorpicker
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const color = $('#3b82f6');
|
||||
|
||||
return Colorpicker({
|
||||
label: 'Pick a color',
|
||||
value: color
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Reactive Preview
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-preview" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PreviewDemo = () => {
|
||||
const color = $('#10b981');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Colorpicker({
|
||||
label: 'Choose color',
|
||||
value: color
|
||||
}),
|
||||
Div({
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreviewDemo, '#demo-preview');
|
||||
```
|
||||
|
||||
### Color Palette Grid
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-palette" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PaletteDemo = () => {
|
||||
const selectedColor = $('#ef4444');
|
||||
const presets = [
|
||||
'#ef4444', '#f97316', '#f59e0b', '#eab308',
|
||||
'#84cc16', '#10b981', '#14b8a6', '#06b6d4',
|
||||
'#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
|
||||
'#ec489a', '#f43f5e', '#6b7280', '#1f2937'
|
||||
];
|
||||
|
||||
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({
|
||||
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())
|
||||
]);
|
||||
};
|
||||
$mount(PaletteDemo, '#demo-palette');
|
||||
```
|
||||
|
||||
### With Text Color Preview
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-text" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TextDemo = () => {
|
||||
const bgColor = $('#1e293b');
|
||||
const textColor = $('#f8fafc');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Colorpicker({
|
||||
label: 'Background',
|
||||
value: bgColor
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Text',
|
||||
value: textColor
|
||||
})
|
||||
]),
|
||||
Div({
|
||||
class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
|
||||
style: () => `background-color: ${bgColor()}; color: ${textColor()}`
|
||||
}, [
|
||||
'Preview text with your colors'
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(TextDemo, '#demo-text');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
|
||||
Colorpicker({
|
||||
label: 'Primary',
|
||||
value: $('#3b82f6')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Success',
|
||||
value: $('#10b981')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Warning',
|
||||
value: $('#f59e0b')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Error',
|
||||
value: $('#ef4444')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Dynamic Color Swatch
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DynamicDemo = () => {
|
||||
const primary = $('#3b82f6');
|
||||
const secondary = $('#ef4444');
|
||||
const accent = $('#10b981');
|
||||
|
||||
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({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${primary()}; color: white`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${secondary()}; color: white`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${accent()}; color: white`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initColorpickerExamples = () => {
|
||||
|
||||
// 1. Basic Colorpicker
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const color = $('#3b82f6');
|
||||
return Colorpicker({
|
||||
label: 'Pick a color',
|
||||
value: color
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Reactive Preview
|
||||
const previewTarget = document.querySelector('#demo-preview');
|
||||
if (previewTarget && !previewTarget.hasChildNodes()) {
|
||||
const PreviewDemo = () => {
|
||||
const color = $('#10b981');
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Colorpicker({
|
||||
label: 'Choose color',
|
||||
value: color
|
||||
}),
|
||||
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())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreviewDemo, previewTarget);
|
||||
}
|
||||
|
||||
// 3. Color Palette Grid
|
||||
const paletteTarget = document.querySelector('#demo-palette');
|
||||
if (paletteTarget && !paletteTarget.hasChildNodes()) {
|
||||
const PaletteDemo = () => {
|
||||
const selectedColor = $('#ef4444');
|
||||
const presets = [
|
||||
'#ef4444', '#f97316', '#f59e0b', '#eab308',
|
||||
'#84cc16', '#10b981', '#14b8a6', '#06b6d4',
|
||||
'#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
|
||||
'#ec489a', '#f43f5e', '#6b7280', '#1f2937'
|
||||
];
|
||||
|
||||
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({
|
||||
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())
|
||||
]);
|
||||
};
|
||||
$mount(PaletteDemo, paletteTarget);
|
||||
}
|
||||
|
||||
// 4. With Text Color Preview
|
||||
const textTarget = document.querySelector('#demo-text');
|
||||
if (textTarget && !textTarget.hasChildNodes()) {
|
||||
const TextDemo = () => {
|
||||
const bgColor = $('#1e293b');
|
||||
const textColor = $('#f8fafc');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Colorpicker({
|
||||
label: 'Background',
|
||||
value: bgColor
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Text',
|
||||
value: textColor
|
||||
})
|
||||
]),
|
||||
Div({
|
||||
class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
|
||||
style: () => `background-color: ${bgColor()}; color: ${textColor()}`
|
||||
}, [
|
||||
'Preview text with your colors'
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(TextDemo, textTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
|
||||
Colorpicker({
|
||||
label: 'Primary',
|
||||
value: $('#3b82f6')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Success',
|
||||
value: $('#10b981')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Warning',
|
||||
value: $('#f59e0b')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Error',
|
||||
value: $('#ef4444')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 6. Dynamic Color Swatch
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
const primary = $('#3b82f6');
|
||||
const secondary = $('#ef4444');
|
||||
const accent = $('#10b981');
|
||||
|
||||
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({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${primary()}`
|
||||
}, 'Primary'),
|
||||
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({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${accent()}`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initColorpickerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initColorpickerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user