@3xpo/svelte-colour-picker
Version:
A highly customizable color picker component library
79 lines (78 loc) • 5.93 kB
TypeScript
import { SvelteComponentTyped } from "svelte";
import { type RgbaColor, type HsvaColor, type Colord } from 'colord';
import type { A11yColor, Components } from '../type/types';
import { type TextsPartial, type A11yTextsPartial } from '../utils/texts';
declare const __propDef: {
props: {
/** customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice */ components?: Partial<Components> | undefined;
/** input label, hidden when the ColorPicker is always shown (prop `isDialog={false}`) */ label?: string | undefined;
/** input name, useful in a native form */ name?: string | undefined;
/** rgb color */ rgb?: RgbaColor | undefined;
/** hsv color */ hsv?: HsvaColor | undefined;
/** hex color */ hex?: string | undefined;
/** Colord color */ color?: Colord | undefined;
/** indicator whether the selected color is light or dark */ isDark?: boolean | undefined;
/** if set to false, disables the alpha channel */ isAlpha?: boolean | undefined;
/** if set to false, the input and the label will not be displayed and the ColorPicker will always be visible */ isDialog?: boolean | undefined;
/** indicator of the popup state */ isOpen?: boolean | undefined;
/** if set to false, hide the hex, rgb and hsv text inputs */ isTextInput?: boolean | undefined;
/** configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value */ textInputModes?: ("hex" | "rgb" | "hsv")[] | undefined;
/** If set to "horizontal", the hue and alpha sliders will be displayed horizontally. It is necessary to set this props to "horizontal" for the ChromeVariant */ sliderDirection?: "horizontal" | "vertical" | undefined;
/** If set to true, it will not be possible to close the color picker by clicking outside */ disableCloseClickOutside?: boolean | undefined;
/** used with the A11yVariant. Define the accessibility examples in the color picker */ a11yColors?: A11yColor[] | undefined;
/** required WCAG contrast level */ a11yLevel?: "AA" | "AAA" | undefined;
/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Exponential-Workload/svelte-colour-picker/blob/master/src/lib/texts.ts) */ texts?: TextsPartial | undefined;
/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Exponential-Workload/svelte-colour-picker/blob/master/src/lib/texts.ts) */ a11yTexts?: A11yTextsPartial | undefined;
};
events: {
input: CustomEvent<{
hsv: HsvaColor;
rgb: RgbaColor;
hex: string;
color: Colord | undefined;
}>;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {};
};
export type ColorPickerProps = typeof __propDef.props;
export type ColorPickerEvents = typeof __propDef.events;
export type ColorPickerSlots = typeof __propDef.slots;
/**
* Color Picker Component — default export of the library
*
* **Import**
* ```js
* import ColorPicker from '@3xpo/svelte-colour-picker';
* ```
*
* **Use**
* ```svelte
* <ColorPicker bind:hex />
* ```
*
* **Props**
* @prop components: Partial<Components> = {} — customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice
* @prop label: string = 'Choose a color' — input label, hidden when the ColorPicker is always shown (prop `isDialog={false}`)
* @prop name: string | undefined = undefined — input name, useful in a native form
* @prop rgb: RgbaColor = { r: 255, g: 0, b: 0, a: 1 } — rgb color
* @prop hsv: HsvaColor = { h: 0, s: 100, v: 100, a: 1 } — hsv color
* @prop hex: string = '#ff0000' — hex color
* @prop color: Colord | undefined = undefined — Colord color
* @prop isDark: boolean = false — indicator whether the selected color is light or dark
* @prop isAlpha: boolean = true — if set to false, disables the alpha channel
* @prop isDialog: boolean = true — if set to false, the input and the label will not be displayed and the ColorPicker will always be visible
* @prop isOpen: boolean = !isDialog — indicator of the popup state
* @prop isTextInput: boolean = true — if set to false, hide the hex, rgb and hsv text inputs
* @prop textInputModes: Array<'hex' | 'rgb' | 'hsv'> = ['hex', 'rgb', 'hsv'] — configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value
* @prop sliderDirection: 'horizontal' | 'vertical' = 'vertical' — If set to "horizontal", the hue and alpha sliders will be displayed horizontally. It is necessary to set this props to "horizontal" for the ChromeVariant
* @prop disableCloseClickOutside: boolean = false — If set to true, it will not be possible to close the color picker by clicking outside
* @prop a11yColors: Array<A11yColor> = [{ bgHex: '#ffffff' }] — used with the A11yVariant. Define the accessibility examples in the color picker
* @prop a11yLevel: 'AA' | 'AAA' = 'AA' — required WCAG contrast level
* @prop texts: TextsPartial | undefined = undefined — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Exponential-Workload/svelte-colour-picker/blob/master/src/lib/texts.ts)
* @prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Exponential-Workload/svelte-colour-picker/blob/master/src/lib/texts.ts)
*/
export default class ColorPicker extends SvelteComponentTyped<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
}
export {};