How to use @simonwep/pickr - 10 common examples

To help you get started, we’ve selected a few @simonwep/pickr examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Simonwep / gpickr / src / js / gpickr.js View on Github external
// Build dom
        this._root = buildGPickr(opt);

        // Check if conic-gradient is supported
        if (CSS.supports('background-image', 'conic-gradient(#fff, #fff)')) {
            this._modes.push('conic');
        }

        opt.el = opt.el.split(/>>/g).reduce((pv, cv, ci, a) => {
            pv = pv.querySelector(cv);
            return ci < a.length - 1 ? pv.shadowRoot : pv;
        }, document);

        opt.el.parentElement.replaceChild(this._root.root, opt.el);

        this._pickr = Pickr.create({
            el: this._root.pickr,
            theme: 'nano',
            inline: true,
            useAsButton: true,
            showAlways: true,
            defaultRepresentation: 'HEXA',

            components: {
                palette: true,
                preview: true,
                opacity: true,
                hue: true,

                interaction: {
                    input: true
                }
github ovanta / vue-cloudfront / src / vue / ui / input / Pickr.vue View on Github external
mounted() {
            this.pickr = new Pickr({
                el: this.$refs.pickr,
                lockOpacity: true,
                default: this.color,
                theme: 'nano',

                swatches: this.$config.predefinedColors,
                defaultRepresentation: 'HEXA',
                components: {

                    // Main components
                    preview: true,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        input: true,
github cruise-automation / webviz / packages / webviz-core / src / components / ColorPicker.js View on Github external
useLayoutEffect(() => {
    if (!container.current) {
      throw new Error("missing container element");
    }
    pickr.current = new Pickr({
      el: container.current,

      // Pickr internally calls setColor() after initialization, so if our setColor
      // happens too early it will be overridden by the default color
      default: colorRef.current,

      theme: "monolith",
      useAsButton: true,
      comparison: false,
      lockOpacity: true,
      components: {
        preview: false,
        hue: true,
        interaction: {
          input: true,
        },
github vanilla / vanilla / library / src / scripts / forms / themeEditor / ThemeColorPicker.tsx View on Github external
const createAndOpen = useCallback(() => {
        if (!ref.current) {
            return;
        }

        if (pickrRef.current) {
            return;
        }

        const pickr = Pickr.create({
            el: ref.current,
            theme: "nano",
            outputPrecision: 0,
            useAsButton: true,
            default: currentColorRef.current,
            components: {
                // Main components
                preview: true,
                hue: true,

                // Input / output Options
                interaction: {
                    input: true,
                },
            },
        });
github benetech / MathShare / src / components / Editor / components / MyWork / components / MathPalette / components / MathButtonsGroup / components / MathButtonsRow / components / MathButton / index.js View on Github external
OpenColorPicker() {
        const theActiveMathField = this.props.theActiveMathField;

        if (!this.pickr) {
            this.pickr = Pickr.create({
                el: '#colorBtn',
                useAsButton: true,

                components: {

                    // Main components
                    preview: true,
                    opacity: false,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        hex: true,
                        rgba: true,
                        hsla: true,
                        hsva: true,
github Sn8z / Poddr / src / app / settings / settings.component.ts View on Github external
private initPickr = () => {
		this.pickr = new Pickr({
			el: '.clr-pickr',
			default: '#00FFAA',
			theme: 'classic',
			lockOpacity: true,
			components: {
				preview: true,
				opacity: true,
				hue: true,
				interaction: {
					input: true,
					save: true
				}
			}
		});
		this.pickr.on('init', instance => {
			this.pickr.setColor(this.store.get("color", "#FF9900"));
github Kooboo / Kooboo / Kooboo.Web / kooboo-web-editor / src / components / common / colorPicker.ts View on Github external
setTimeout(() => {
    const pickr = new Pickr({
      el: picker,
      theme: "nano",
      default: old,
      autoReposition: false,
      components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
          cancel: true,
          save: true
        }
      },
      strings: {
        save: TEXT.OK,
        cancel: TEXT.CANCEL
github fusioncms / fusioncms / fusion / resources / js / components / Importer / Fields / Color.vue View on Github external
mounted() {
			this.pickr = Pickr.create({
				el: '.' + this.mapping.handle + '-pickr',
				theme: 'monolith',
				default: this.mapping.default,
				comparison: true,
				components: {
                    opacity: this.settings.transparency,
                    hue: true,
                }
            }).on('save', (color, instance) => {
                this.pickrChanged(color)
            }).on('change', (color, instance) => {
                this.pickrChanged(color)
            }).on('clear', (instance) => {
                this.pickrChanged(null)
            })
github fusioncms / fusioncms / fusion / resources / js / fieldtypes / ColorPicker / Field.vue View on Github external
mounted() {
            let defaultColor = this.value === null && this.field.settings.default ? this.field.settings.default : ''

            this.pickr = Pickr.create({
                el: '.' + this.pickrClass,
                theme: 'monolith',
                default: this.value && this.value != '' ? this.value : defaultColor,
                swatches: [
                    '#000000',
                    '#FFFFFF',
                    
                    '#F7FAFC',
                    '#EDF2F7',
                    '#E2E8F0',
                    '#CBD5E0',
                    '#A0AEC0',
                    '#718096',
                    '#4A5568',
                    '#2D3748',
github Simonwep / gpickr / src / js / template.js View on Github external
export default () => utils.createFromTemplate(`
<div class="gpickr">

    <div></div>
    <div class="gpcr-interaction">
    <div class="gpcr-result">
        
         <div class="gpcr-mode" data-mode="linear"></div>

            <div class="gpcr-angle">
                <div></div>
            </div>

            <div class="gpcr-pos">
                ${['tl', 'tm', 'tr', 'l', 'm', 'r', 'bl', 'bm', 'br'].map(v =&gt; `<div data-pos="${v}"></div>`).join('')}
            </div>
        </div></div></div>

@simonwep/pickr

Flat, Simple, Hackable Color-Picker.

MIT
Latest version published 10 days ago

Package Health Score

78 / 100
Full package analysis