@thinkpixellab-public/px-vue 3.0.101 → 3.0.103

package/assets/icons/ellipsis.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><g transform="translate(4 11)" fill="currentColor" fill-rule="evenodd"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="8" cy="1.5" r="1.5"/><circle cx="14.5" cy="1.5" r="1.5"/></g></svg>

package/assets/icons/eyedropper.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2"><path d="M16.716 2.498a3.067 3.067 0 0 1 2.962-.793c1.059.283 2.654 1.878 2.937 2.937a3.067 3.067 0 0 1-.793 2.962l-4.152 4.152-.538-.537-9.72 9.72L1.6 22.72l1.78-5.811 9.721-9.721-.537-.538 4.152-4.152ZM11.315 5.402l7.526 7.526"/></g></svg>

package/components/PxBalancedText.vue

@@ -19,6 +19,9 @@
                 {{ text }}
             </slot>
         </component>
+
+        <!-- after -->
+        <slot name="after"></slot>
     </component>
 </template>
 

package/components/PxBaseColor.vue

@@ -0,0 +1,186 @@
+<script>
+import tinycolor from 'tinycolor2';
+import {
+    hsvaEnsureObject,
+    hsvaIsEqual,
+    hsvaToHsla,
+    hslaToStr,
+    hsvaContrastColor,
+} from '../utils/color.js';
+
+const TINY_FORMATS = ['rgb', 'prgb', 'hex6', 'hex3', 'hex8', 'name', 'hsl', 'hsv'];
+
+export default {
+    name: 'px-color-picker',
+
+    props: {
+        /**
+         * The color value.
+         */
+        color: { default: '#FF0000' },
+
+        /**
+         * The format of the color value (used for emitting events, v-model, and the default format
+         * for getColor). Allowed values are the same as those available from the tinycolor library
+         * (rgb, prgb, hex6, hex3, hex8, name, hsl, hsv) as well as 'auto' (which will attempt to
+         * use the same format as the last value set with the color prop) and 'tiny' (which will
+         * return a tinycolor object) and 'hsva' which will return hsva values as an object. The
+         * format has the advantage of not requiring a tinycolor object to be created when the color
+         * changes.
+         *
+         * @values rgb, prgb, hex6, hex3, hex8, name, hsl, hsv, auto, tiny
+         */
+        format: { type: String, default: 'hsva' },
+
+        /**
+         * Whether alpha colors are enabled.
+         */
+        alphaEnabled: { type: Boolean, default: false },
+    },
+
+    data() {
+        return { autoFormat: this.format, h: 0, s: 0, v: 0, a: 1 };
+    },
+
+    computed: {
+        hsva() {
+            return { h: this.h, s: this.s, v: this.v, a: this.alphaEnabled ? this.a : 1 };
+        },
+        hsla() {
+            return hsvaToHsla(this.hsva);
+        },
+        hslStr() {
+            return hslaToStr(this.hsla, false);
+        },
+        hslaStr() {
+            return hslaToStr(this.hsla, true);
+        },
+        hslaTransparentStr() {
+            return hslaToStr({ ...this.hsla, a: 0 }, true);
+        },
+        hueStr() {
+            return `hsl(${this.h}, 100%, 50%)`;
+        },
+        contrastStr() {
+            return hsvaContrastColor(this.hsva);
+        },
+        eyedropperSupported() {
+            return window?.EyeDropper;
+        },
+    },
+
+    watch: {
+        color(nv) {
+            // update colorValue when color changes
+            this.setColor(nv);
+        },
+        hsla() {
+            // emit change when this changes as a proxy for changes to hsva as individual props
+            this.emitChange();
+        },
+    },
+
+    mounted() {
+        if (this.color) {
+            this.setColor(this.color);
+        }
+
+        if (this.format) {
+            if (!TINY_FORMATS.includes(this.format)) {
+                console.warn(
+                    `[PxBaseColor] Invalid format: "${this.format}". See comments in PxBaseColor.vue`,
+                );
+            }
+        }
+    },
+    methods: {
+        setColor(strOrHsva) {
+            if (typeof strOrHsva === 'string') {
+                this.setColorStr(strOrHsva);
+            }
+
+            if (typeof strOrHsva === 'object') {
+                this.setColorHsva(strOrHsva);
+            }
+        },
+
+        setColorStr(str) {
+            // this is for efficiency but also to prevent color creep as we convert between formats
+            if (this.lastEmit == str) {
+                return;
+            }
+
+            const tiny = tinycolor(str);
+            this.autoFormat = tiny.getFormat();
+
+            const hsva = tiny.toHsv();
+            this.setColorHsva(hsva);
+        },
+
+        setColorHsva(hsva) {
+            if (this.isCurrentHsva(hsva)) {
+                return;
+            }
+
+            this.h = hsva.h;
+            this.s = hsva.s;
+            this.v = hsva.v;
+            this.a = hsva.a;
+        },
+
+        emitChange() {
+            const clr = this.getColor(this.format);
+
+            this.lastEmit = clr;
+
+            this.$emit('update:color', clr);
+            this.$emit('change', clr);
+        },
+
+        getColor(format = null) {
+            format = format || this.format;
+
+            if (format == 'auto') {
+                format = this.autoFormat;
+            }
+
+            let clr = { h: this.h, s: this.s, v: this.v, a: this.a };
+
+            if (format == 'hsva') {
+                return clr;
+            }
+
+            if (format && [...TINY_FORMATS, 'tiny'].includes(format)) {
+                const tiny = tinycolor(clr);
+
+                if (format == 'tiny') {
+                    clr = tiny;
+                } else {
+                    clr = tiny.toString(format);
+                }
+            }
+
+            return clr;
+        },
+
+        colorStrToHsva(str) {
+            const tiny = tinycolor(str);
+            return tiny.toHsv();
+        },
+
+        isCurrentHsva(hOrObj, s, v, a) {
+            const hsvaCompare = hsvaEnsureObject(hOrObj, s, v, a);
+            return hsvaIsEqual(this.hsva, hsvaCompare);
+        },
+
+        setColorFromEyedropper() {
+            if (this.eyedropperSupported) {
+                const eyeDropper = new EyeDropper();
+                eyeDropper.open().then(result => {
+                    this.setColorStr(result.sRGBHex);
+                });
+            }
+        },
+    },
+};
+</script>

package/components/PxColorPalette.vue

@@ -0,0 +1,118 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxColorPaletteButton
+            v-for="(color, index) in calcPalette"
+            :key="index"
+            :hsva="color.hsva"
+            :selected="!(pickerActive && isCurrentHsva(pickerHsva)) && isCurrentHsva(color.hsva)"
+            @click.native="onPaletteClick(color)"
+        ></PxColorPaletteButton>
+        <PxColorPicker
+            v-if="showPicker"
+            v-bind="calcPickerAttrs"
+            :color="pickerHsva"
+            :selected="pickerActive && isCurrentHsva(pickerHsva)"
+            :pending="pickerPending"
+            @click="onPickerClick"
+            @change="onPickerChange"
+        />
+    </div>
+</template>
+
+<script>
+import PxBaseColor from './PxBaseColor.vue';
+import tinycolor from 'tinycolor2';
+import PxColorPaletteButton from './PxColorPaletteButton.vue';
+import PxColorPicker from './PxColorPicker.vue';
+
+export default {
+    name: 'px-color-palette',
+    components: { PxColorPaletteButton, PxColorPicker },
+    mixins: [PxBaseColor],
+    props: {
+        /**
+         * Array of colors to display in the palette
+         */
+        palette: { type: Array, default: null },
+
+        // none | picker | eyedropper | eyedropper-only
+        pickerMode: { type: String, default: 'none' },
+        pickerAttrs: { type: Object, default: () => {} },
+        pickerInitColor: { type: String, default: 'blue' },
+        pickerInitSelected: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            pickerActive: this.pickerInitSelected,
+            pickerPending: true,
+            pickerHsva: this.colorStrToHsva(this.pickerInitColor),
+        };
+    },
+    computed: {
+        calcPalette() {
+            return this.palette.map(color => {
+                const tiny = tinycolor(color);
+                return {
+                    hsva: tiny.toHsv(),
+                    css: tiny.toString(this.alphaEnabled ? 'hex6' : 'rgb'),
+                };
+            });
+        },
+        calcPickerAttrs() {
+            const eyedropperMode = {
+                none: 'none',
+                picker: 'none',
+                eyedropper: 'popup',
+                'eyedropper-only': 'only',
+            }[this.pickerMode];
+
+            const iconFallback = {
+                none: null,
+                picker: 'ellipsis',
+                eyedropper: 'ellipsis',
+                'eyedropper-only': 'eyedropper',
+            }[this.pickerMode];
+
+            return {
+                iconFallback,
+                eyedropperMode,
+                alphaEnabled: this.alphaEnabled,
+                ...this.pickerAttrs,
+            };
+        },
+        showPicker() {
+            return this.pickerMode != 'none';
+        },
+    },
+    // watch: {},
+    mounted() {},
+    methods: {
+        onPaletteClick(color) {
+            this.pickerActive = false;
+            this.setColorHsva(color.hsva);
+        },
+        onPickerClick() {
+            this.pickerActive = true;
+        },
+        onPickerChange(e) {
+            if (this.pickerActive) {
+                this.pickerPending = false;
+                this.pickerHsva = e;
+                this.setColorHsva(e);
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-color-palette {
+    display: flex;
+    gap: 0.5em;
+}
+</style>

package/components/PxColorPaletteButton.vue

@@ -0,0 +1,140 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <button :class="bem({ selected, pending })" :style="{ color: hslaStr }">
+        <span />
+        <slot />
+    </button>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+import { hsvaToHsla, hslaToStr } from '../utils/color.js';
+
+export default {
+    name: 'px-color-palette-button',
+    props: {
+        hsva: {
+            type: Object,
+            default: () => {
+                return { h: 0, s: 0, v: 0, a: 0 };
+            },
+        },
+        selected: { type: Boolean, default: false },
+        pending: { type: Boolean, default: false },
+    },
+    // data() { return { b: 0 }; },
+    computed: {
+        hslaStr() {
+            return hslaToStr(hsvaToHsla(this.hsva), true);
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+@function color-wheel-gradient($count, $blend: true, $sat: 100%, $light: 50%) {
+    $grad: 'conic-gradient(';
+    @for $i from 1 through $count {
+        $color: hsl(360 - divide(360, $count) * $i, $sat, $light);
+        $start: percentage(divide($i - 1, $count));
+        $stop: percentage(divide($i, $count));
+        $end: if($i == $count, ')', ',');
+
+        @if $blend {
+            $grad: '#{$grad} #{$color} #{$start}#{$end}';
+        } @else {
+            $grad: '#{$grad} #{$color} #{$start}, #{$color} #{$stop}#{$end}';
+        }
+    }
+
+    @return unquote($grad);
+}
+
+.px-color-palette-button {
+    @include control-reset();
+
+    position: relative;
+    aspect-ratio: 1;
+    width: 2em;
+    border-radius: 50%;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    @include transition(transform, $dur: 0.2s);
+
+    @include checkered-background(
+        $width: 0.25em,
+        $color: rgba(black, 0.1),
+        $color-alt: transparent
+    );
+
+    > span {
+        @include abs();
+        border-radius: inherit;
+        background-color: currentColor;
+    }
+
+    &:before,
+    &:after {
+        border-radius: inherit;
+        @include transition(all, $dur: 0.3s);
+    }
+
+    @include before() {
+        @include abs(-2px);
+        border: 2px solid black;
+        opacity: 0;
+    }
+    @include after() {
+        @include abs();
+        border: 1.5px solid white;
+        opacity: 0;
+    }
+
+    &:hover {
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(1) !important;
+    }
+
+    &--selected {
+        &:before,
+        &:after {
+            opacity: 1;
+        }
+    }
+
+    &--pending > span {
+        @include abs(-0.5px);
+        background-color: transparent;
+        background-image: color-wheel-gradient(8, false, $light: 50%);
+        @include after() {
+            @include abs(4px);
+            background-color: rgba(white, 0.8);
+            border: 0px solid white;
+            border-radius: 50%;
+        }
+    }
+
+    &--pending {
+        color: black !important;
+        // &:before {
+        //     border: 1px solid rgba(black, 0.5);
+        //     opacity: 1;
+        // }
+    }
+}
+</style>

package/components/PxColorPanel.vue

@@ -0,0 +1,267 @@
+<template>
+    <div
+        :class="bem()"
+        :style="{
+            '--px-color-panel-hsl': hslStr,
+            '--px-color-panel-hsla': hslaStr,
+            '--px-color-panel-hsla-transparent': hslaTransparentStr,
+            '--px-color-panel-hsl-hue': hueStr,
+            '--px-color-panel-contrast': contrastStr,
+        }"
+    >
+        <div ref="satval" :class="[bem('satval'), satValPanelClass]">
+            <div
+                :class="bem('sel', { satval: true })"
+                :style="{
+                    left: cssPcnt(s),
+                    top: cssPcnt(1 - v),
+                }"
+            ></div>
+        </div>
+        <div :class="bem('sliders')">
+            <div :class="[bem('hue'), hueSliderClass]" ref="hue">
+                <div
+                    :class="bem('sel', { hue: true })"
+                    :style="{
+                        left: cssPcnt(h / 360),
+                    }"
+                ></div>
+            </div>
+            <div v-if="alphaEnabled" :class="[bem('alpha'), alphaSliderClass]" ref="alpha">
+                <div
+                    :class="bem('sel', { alpha: true })"
+                    :style="{
+                        left: cssPcnt(a),
+                    }"
+                ></div>
+            </div>
+        </div>
+        <div :class="bem('swatch')"></div>
+        <PxIconButton
+            v-if="eyedropperEnabled && eyedropperSupported"
+            :class="[bem('eyedropper'), eyedropperClass]"
+            @click="setColorFromEyedropper"
+            :src="EyeDropperSvg"
+            :size="0.85"
+        />
+    </div>
+</template>
+
+<script>
+import Drag from '../utils/drag.js';
+import PxBaseColor from './PxBaseColor.vue';
+import PxIconButton from './PxIconButton.vue';
+import EyeDropperSvg from '../assets/icons/eyedropper.svg';
+
+export default {
+    name: 'px-color-panel',
+    mixins: [PxBaseColor],
+    components: { PxIconButton },
+    props: {
+        hueSliderClass: { type: String, default: '' },
+        alphaSliderClass: { type: String, default: '' },
+        satValPanelClass: { type: String, default: '' },
+        eyedropperClass: { type: String, default: '' },
+        eyedropperEnabled: { type: Boolean, default: true },
+        eyedropperIcon: { type: String, default: EyeDropperSvg },
+        swatchVisible: { type: Boolean, default: true },
+    },
+
+    data() {
+        return {
+            EyeDropperSvg,
+        };
+    },
+
+    // watch: {},
+    mounted() {
+        if (this.$refs.satval) {
+            this.satvalDrag = new Drag(this.$refs.satval, {
+                startThreshold: 0,
+                lock: null,
+                onStart: this.onSatvalDrag,
+                onDrag: this.onSatvalDrag,
+                excludeSelector: this.dragExcludeSelector,
+            });
+        }
+
+        if (this.$refs.hue) {
+            this.hueDrag = new Drag(this.$refs.hue, {
+                startThreshold: 0,
+                lock: null,
+                onStart: this.onHueDrag,
+                onDrag: this.onHueDrag,
+                excludeSelector: this.dragExcludeSelector,
+            });
+        }
+
+        if (this.alphaEnabled && this.$refs.alpha) {
+            this.alphaDrag = new Drag(this.$refs.alpha, {
+                startThreshold: 0,
+                lock: null,
+                onStart: this.onAlphaDrag,
+                onDrag: this.onAlphaDrag,
+                excludeSelector: this.dragExcludeSelector,
+            });
+        }
+    },
+    beforeDestroy() {
+        if (this.satvalDrag) {
+            this.satvalDrag.destroy();
+        }
+
+        if (this.hueDrag) {
+            this.hueDrag.destroy();
+        }
+
+        if (this.alphaDrag) {
+            this.alphaDrag.destroy();
+        }
+    },
+    methods: {
+        onSatvalDrag(e) {
+            this.s = Math.max(0, Math.min(1, e.elementXPos));
+            this.v = Math.max(0, Math.min(1, 1 - e.elementYPos));
+        },
+        onHueDrag(e) {
+            this.h = 360 * Math.max(0, Math.min(1, e.elementXPos));
+        },
+        onAlphaDrag(e) {
+            this.a = Math.max(0, Math.min(1, e.elementXPos));
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+@at-root {
+    :root {
+        --px-color-panel-aspect: 1;
+        --px-color-panel-gap: 0.5em;
+        --px-color-panel-radius: 0.5em;
+        --px-color-panel-slider-height: 0.5em;
+    }
+}
+
+.px-color-panel {
+    width: 20em;
+    display: flex;
+    flex-direction: column;
+    aspect-ratio: var(--px-color-panel-aspect);
+    gap: var(--px-color-panel-gap) 0;
+
+    // prettier-ignore
+    @include grid-art(
+        (
+            'auto   | #(0, 1fr) |',
+            'satval | satval    | #(0,1fr)',
+            'swatch | sliders   | auto',
+        )
+    );
+
+    &__satval {
+        grid-area: satval;
+        flex: 1;
+        position: relative;
+        display: block;
+        width: 100%;
+        border-radius: var(--px-color-panel-radius);
+
+        background-image: linear-gradient(rgba(0, 0, 0, 0), #000),
+            linear-gradient(90deg, #fff, var(--px-color-panel-hsl-hue));
+    }
+
+    &__sliders {
+        grid-area: sliders;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--px-color-panel-gap);
+    }
+
+    &__hue,
+    &__alpha {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 0.66em;
+        border-radius: var(--px-color-panel-radius);
+        flex: none;
+        align-self: center;
+    }
+
+    &__hue {
+        grid-area: hue;
+        background-image: linear-gradient(90deg, red, yellow, lime, aqua, blue, fuchsia, red);
+    }
+
+    &__alpha {
+        grid-area: alpha;
+
+        @include checkered-background(
+            $width: 0.25em,
+            $color: rgba(black, 0.1),
+            $color-alt: transparent
+        );
+
+        @include after() {
+            @include abs();
+            border-radius: inherit;
+            background-image: linear-gradient(
+                to right,
+                var(--px-color-panel-hsla-transparent) 0%,
+                var(--px-color-panel-hsl) 100%
+            );
+        }
+    }
+
+    &__sel {
+        position: absolute;
+        top: 100%;
+        left: 100%;
+        transform: translate(-50%, -50%);
+        width: 1px;
+        height: 1px;
+        width: 0.66em;
+        height: 0.66em;
+        background-color: var(--px-color-panel-hsl);
+        border: 1px solid white;
+        border-radius: 50%;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+        z-index: 1;
+
+        &:hover {
+            z-index: 2;
+        }
+
+        &--hue {
+            top: 50%;
+            background-color: var(--px-color-panel-hsl-hue);
+        }
+
+        &--alpha {
+            top: 50%;
+            background-color: var(--px-color-panel-hsla);
+        }
+    }
+
+    &__swatch {
+        grid-area: swatch;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background-color: var(--px-color-panel-hsla);
+        margin-inline-end: var(--px-color-panel-gap);
+        border: 1px solid rgba(black, 0.1);
+        min-height: 1.66em;
+    }
+
+    &__eyedropper {
+        grid-area: swatch;
+        margin-inline-end: var(--px-color-panel-gap);
+        color: var(--px-color-panel-contrast);
+        aspect-ratio: 1;
+    }
+}
+</style>

package/components/PxColorPicker.vue

@@ -0,0 +1,142 @@
+<template>
+    <div :class="bem()">
+        <PxColorPaletteButton
+            @click.native="click"
+            :hsva="hsva"
+            :selected="selected"
+            :pending="pending"
+        >
+            <PxIcon
+                :class="bem('icon')"
+                v-bind="calcIconAttrs"
+                :style="{ color: calcIconColor }"
+                :size="1"
+            />
+        </PxColorPaletteButton>
+        <PxFloat
+            :popupClass="bem('popup')"
+            :visible.sync="popupVisible"
+            variant="none"
+            placement="bottom-center"
+        >
+            <PxColorPanel
+                :class="bem('panel')"
+                :color="hsva"
+                :alphaEnabled="alphaEnabled"
+                :eyedropperEnabled="eyedropperMode === 'popup'"
+                format="hsva"
+                @change="panelColorChange"
+            ></PxColorPanel>
+        </PxFloat>
+    </div>
+</template>
+
+<script>
+import PxFloat from './PxFloat.vue';
+import PxColorPanel from './PxColorPanel.vue';
+import PxColorPaletteButton from './PxColorPaletteButton.vue';
+import PxBaseColor from './PxBaseColor.vue';
+import PxIcon from './PxIcon.vue';
+
+const PxColorPicker = {
+    name: 'px-color-picker',
+    components: { PxFloat, PxColorPanel, PxColorPaletteButton, PxIcon },
+    mixins: [PxBaseColor],
+    props: {
+        /**
+         * An icon to display inside the button. If a string is provided, it will be interpreted as
+         * the src of the icon. If an object is provided, it will be passed directly to the icon
+         * component as props (with a filter applied to ensure no fallback attributes).
+         */
+        icon: { type: [String, Object], default: null },
+
+        /**
+         * Convenience prop for setting the icon if the icon prop hasn't been set. Allowed values
+         * are 'eyedropper' and 'ellipsis'.
+         */
+        iconFallback: { type: String, default: null },
+
+        /**
+         * Describes how to integrate the eyedropper into the color picker. Allowed values are:
+         *  'none' - don't show the eyedropper
+         *  'popup' - show the eyedropper in the popup
+         *  'only' - only show the eyedropper (instead of the standard dialog)
+         */
+        eyedropperMode: { type: String, default: 'none' },
+
+        /**
+         * Makes the color picker appear selected (passed to the PxColorPaletteButton component)
+         */
+        selected: { type: Boolean, default: false },
+
+        /**
+         * Gives the color picker a pending appearance (passed to the PxColorPaletteButton component)
+         */
+        pending: { type: Boolean, default: false },
+    },
+    data() {
+        return { popupVisible: false };
+    },
+    computed: {
+        calcIconAttrs() {
+            if (this.icon) {
+                return this.icon;
+            } else if (this.iconFallback) {
+                switch (this.iconFallback) {
+                    case 'eyedropper':
+                        return { src: require('../assets/icons/eyedropper.svg'), size: 0.9 };
+                    case 'ellipsis':
+                        return { src: require('../assets/icons/ellipsis.svg') };
+                }
+            }
+        },
+        calcIconColor() {
+            if (this.pending) {
+                return null;
+            }
+            return this.contrastStr;
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    methods: {
+        panelColorChange(hsva) {
+            this.setColorHsva(hsva);
+        },
+        click() {
+            this.$emit('click');
+
+            if (this.eyedropperMode === 'only') {
+                this.setColorFromEyedropper();
+            } else {
+                this.popupVisible = true;
+            }
+        },
+    },
+};
+
+export default PxColorPicker;
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+@at-root {
+    :root {
+        --px-color-picker-popup-bg: #{clr(page-bg)};
+    }
+}
+.px-color-picker {
+    &__panel {
+        width: 10em;
+    }
+
+    &__popup {
+        padding: 0.66em;
+        border-radius: 0.75em;
+
+        background-color: var(--px-color-picker-popup-bg);
+        @include depth-shadow(20, 0.15);
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.101",
+    "version": "3.0.103",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -25,6 +25,7 @@
         "qrcode": "^1.5.1",
         "tiny-date-picker": "^3.2.8",
         "tiny-swiper": "^2.2.0",
+        "tinycolor2": "^1.6.0",
         "vue-inline-svg": "^2.1.0"
     },
     "devDependencies": {

package/utils/color.js

@@ -0,0 +1,50 @@
+function hsvaEnsureObject(hOrObj, s, v, a) {
+    if (typeof hOrObj === 'object') {
+        return hOrObj;
+    }
+
+    return { h: hOrObj, s, v, a };
+}
+
+function hsvaIsEqual(hsva1, hsva2) {
+    return hsva1.h === hsva2.h && hsva1.s === hsva2.s && hsva1.v === hsva2.v && hsva1.a === hsva2.a;
+}
+
+function hsvaToHsla(hOrObj, s, v, a) {
+    const hsva = hsvaEnsureObject(hOrObj, s, v, a);
+
+    let l = ((2 - hsva.s) * hsva.v) / 2;
+    s = hsva.s;
+
+    if (l != 0) {
+        if (l == 1) {
+            s = 0;
+        } else if (l < 0.5) {
+            s = (s * hsva.v) / (l * 2);
+        } else {
+            s = (s * hsva.v) / (2 - l * 2);
+        }
+    }
+
+    return { h: hsva.h, s: s, l: l, a: hsva.a };
+}
+
+function hslaToStr(hsla, alphaEnabled = true) {
+    if (alphaEnabled) {
+        return `hsla(${hsla.h}, ${hsla.s * 100}%, ${hsla.l * 100}%, ${hsla.a})`;
+    } else {
+        return `hsl(${hsla.h}, ${hsla.s * 100}%, ${hsla.l * 100}%)`;
+    }
+}
+
+function hsvaContrastColor(hsva, light = '#FFF', dark = '#000') {
+    const THRESHOLD = 0.5;
+    const hsla = hsvaToHsla(hsva);
+    if (hsla.a < THRESHOLD) {
+        return dark;
+    }
+
+    return hsla.l > THRESHOLD ? dark : light;
+}
+
+export { hsvaEnsureObject, hsvaIsEqual, hsvaToHsla, hslaToStr, hsvaContrastColor };

package/utils/drag.js

@@ -267,13 +267,26 @@ function Drag(element, options) {
             coords.y = nativeEvent.clientY;
         }
 
+        const x = this.thresholdMet && this.startEv && this.lock == 'y' ? this.startEv.x : coords.x;
+        const y = this.thresholdMet && this.startEv && this.lock == 'x' ? this.startEv.y : coords.y;
+
         const ev = {
-            x: this.thresholdMet && this.startEv && this.lock == 'y' ? this.startEv.x : coords.x,
-            y: this.thresholdMet && this.startEv && this.lock == 'x' ? this.startEv.y : coords.y,
+            x,
+            y,
             native: nativeEvent,
             lock: this.lock,
         };
 
+        if (this.thresholdMet && this.element) {
+            const rect = element.getBoundingClientRect();
+            ev.elementX = x - rect.left;
+            ev.elementY = y - rect.top;
+            ev.elementWidth = rect.width;
+            ev.elementHeight = rect.height;
+            ev.elementXPos = ev.elementX / rect.width;
+            ev.elementYPos = ev.elementY / rect.height;
+        }
+
         return ev;
     };