@thinkpixellab-public/px-vue 4.0.11 → 4.0.12

package/assets/icons/ellipsis.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><g transform="translate(4 11)" fill="#000" 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="#000" 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/bases/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/bases/PxBaseSvg.vue

@@ -1,5 +1,5 @@
 <script>
-import { markRaw } from 'vue';
+import isServer from '../utils/isServer';
 import { cssEmFallback } from '../utils/cssStr.js';
 
 export default {
@@ -133,24 +133,22 @@ export default {
         calcStyle() {
             return null;
         },
-    },
-    watch: {
-        src: {
-            immediate: true,
-            handler(nv) {
-                const isSvgStr = nv && nv.includes && nv.includes('<svg');
-
-                if (isSvgStr) {
-                    const svgComponent = {
-                        template: this.transformSvgString(nv),
-                    };
-                    this.svgComponent = markRaw(svgComponent);
-                }
-            },
+        isSvgString() {
+            return this.src && this.src.includes('<svg');
+        },
+        svgString() {
+            if (this.isSvgString) {
+                return this.transformSvgString(this.src);
+            }
         },
     },
+
     methods: {
         transformSvgString(svg) {
+            if (isServer() || typeof DOMParser === undefined) {
+                return svg;
+            }
+
             const parser = new DOMParser();
             const svgElement = parser.parseFromString(svg, 'image/svg+xml').querySelector('svg');
             const transformed = this.transform(svgElement);
@@ -163,33 +161,31 @@ export default {
                 return;
             }
 
-            if (!svg?.viewBox) {
-                return svg;
+            if (svg.viewBox) {
+                // only a valid viewbox if it has both width/height
+                let viewBox =
+                    svg.viewBox.baseVal.width && svg.viewBox.baseVal.height
+                        ? svg.viewBox.baseVal
+                        : null;
+
+                // we only support width/height set in px (unitType = 1 or 5)
+                let width =
+                    svg.width.baseVal.unitType == 1 || svg.width.baseVal.unitType == 5
+                        ? parseFloat(svg.width.baseVal.value)
+                        : viewBox.width;
+                let height =
+                    svg.height.baseVal.unitType == 1 || svg.height.baseVal.unitType == 5
+                        ? parseFloat(svg.height.baseVal.value)
+                        : viewBox.height;
+
+                // save as data values
+                this.svgViewBox = viewBox
+                    ? `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`
+                    : `0 0 ${width} ${height}`;
+                this.svgWidth = width;
+                this.svgHeight = height;
             }
 
-            // only a valid viewbox if it has both width/height
-            let viewBox =
-                svg.viewBox.baseVal.width && svg.viewBox.baseVal.height
-                    ? svg.viewBox.baseVal
-                    : null;
-
-            // we only support width/height set in px (unitType = 1 or 5)
-            let width =
-                svg.width.baseVal.unitType == 1 || svg.width.baseVal.unitType == 5
-                    ? parseFloat(svg.width.baseVal.value)
-                    : viewBox.width;
-            let height =
-                svg.height.baseVal.unitType == 1 || svg.height.baseVal.unitType == 5
-                    ? parseFloat(svg.height.baseVal.value)
-                    : viewBox.height;
-
-            // save as data values
-            this.svgViewBox = viewBox
-                ? `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`
-                : `0 0 ${width} ${height}`;
-            this.svgWidth = width;
-            this.svgHeight = height;
-
             // string replace
             if (this.replacements) {
                 let inner = svg.innerHTML;

package/bases/PxBaseUniqueId.vue

@@ -1,11 +1,9 @@
-<!--
-    #VUE3 Todo
--->
-
 <script>
-// TODO: this is currently not compatible with SSR
-
 export default {
+    beforeCreate() {
+        const id = typeof useId === 'function' ? useId() : Math.floor(Math.random() * 0x10000);
+        this.$__uniqueId = id;
+    },
     methods: {
         /**
          * Get a unique id derived from vue's unique component identifier (this.$.uid) for use when
@@ -20,8 +18,7 @@ export default {
 
         uniqueId(prefix = null) {
             prefix = typeof prefix === 'string' ? prefix.trim() + '-' : '';
-
-            return prefix + ('000000' + Number(this.$.uid).toString(16).toLowerCase()).slice(-4);
+            return prefix + this.$__uniqueId;
         },
     },
 };

package/components/PxCodeSample.vue

@@ -0,0 +1,87 @@
+<template>
+    <div :class="bem()">
+        <pre
+            v-if="loaded"
+            ref="code"
+            class="px-code-sample"
+            :class="lang"
+        ><code v-html="highlightedCode"></code></pre>
+        <PxCopyText
+            v-if="showCopyButton"
+            :class="bem('copy-button')"
+            :text="code"
+            :showText="false"
+        ></PxCopyText>
+    </div>
+</template>
+
+<script>
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import PxCopyText from './PxCopyText.vue';
+
+export default {
+    name: 'px-code-sample',
+    components: { PxCopyText },
+    // mixins: [ Mixin ],
+    props: {
+        code: { type: String, default: '' },
+        lang: { type: String, default: null },
+        showCopyButton: { type: Boolean, default: true },
+    },
+    data() {
+        return { loaded: false };
+    },
+    computed: {
+        highlightedCode() {
+            if (this.loaded) {
+                // remove trailing newline and spaces
+
+                const code = this.code.replace(/^\s+$/, '').replace(/^[\s\uFEFF\xA0]+/, '');
+
+                if (code) {
+                    if (this.lang) {
+                        return hljs.highlight(code, { language: this.lang }).value;
+                    } else {
+                        return hljs.highlightAuto(code).value;
+                    }
+                }
+            }
+            return '';
+        },
+    },
+    // watch: {},
+    mounted() {
+        hljs.registerLanguage('javascript', javascript);
+        hljs.registerLanguage('xml', xml);
+        hljs.registerLanguage('css', css);
+
+        setTimeout(() => {
+            this.loaded = true;
+        });
+    },
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+@use '@thinkpixellab-public/px-styles/src/modules/highlightjs.scss' as *;
+.px-code-sample {
+    position: relative;
+    pre {
+        @include highlightjs();
+        padding: 1em;
+        border-radius: 0.5em;
+    }
+
+    &__copy-button {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+        color: white;
+    }
+}
+</style>

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="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 '../bases/PxBaseColor.vue';
+import tinycolor from 'tinycolor2';
+import PxColorPaletteButton from './PxColorPaletteButton.vue';
+import { PxColorPicker, PxColorPickerPropsFilter } 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 PxColorPickerPropsFilter({
+                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>