@thinkpixellab-public/px-vue 4.0.11 → 4.0.13

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/PxBaseItems.vue

@@ -94,11 +94,11 @@ export default {
         },
 
         isValidItem(item) {
-            return !!this.items.includes(item);
+            return !!this.items?.includes(item);
         },
 
         isValidItemKey(key) {
-            return !!this.itemKeys.includes(key);
+            return !!this.itemKeys?.includes(key);
         },
     },
 };

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/PxBalancedText.vue

@@ -3,7 +3,7 @@
 -->
 <template>
     <component
-        :is="tag"
+        :is="calcTag"
         class="px-balanced-text"
         :style="{ opacity: elementOpacity, color: debugColor, textAlign }"
     >
@@ -11,13 +11,13 @@
         <component
             v-if="hasHtml"
             :class="[bem('inner', { html: true }), innerClass]"
-            :is="innerTag"
+            :is="calcInnerTag"
             ref="text"
             v-html="html"
         />
 
         <!-- slot -->
-        <component v-else :class="[bem('inner'), innerClass]" :is="innerTag" ref="text">
+        <component v-else :class="[bem('inner'), innerClass]" :is="calcInnerTag" ref="text">
             <slot>
                 {{ text }}
             </slot>
@@ -37,12 +37,12 @@ export default {
         /**
          * The outer tag element
          */
-        tag: { type: String, default: 'p' },
+        tag: { type: String, default: null },
 
         /**
          * The inner tag element
          */
-        innerTag: { type: String, default: 'span' },
+        innerTag: { type: String, default: null },
 
         // the inner tag element
         innerClass: { type: String, default: null },
@@ -83,6 +83,14 @@ export default {
         };
     },
     computed: {
+        calcTag() {
+            const defaultTag = this.hasHtml ? 'div' : 'p';
+            return this.tag || defaultTag;
+        },
+        calcInnerTag() {
+            const defaultTag = this.hasHtml ? 'div' : 'span';
+            return this.innerTag || defaultTag;
+        },
         hasHtml() {
             return !!this.htmlValue && !this.text;
         },

package/components/PxCodeSample.vue

@@ -0,0 +1,90 @@
+<template>
+    <div :class="bem()">
+        <pre
+            v-if="loaded"
+            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;
+    padding: 1em;
+    border-radius: 0.5em;
+
+    @include highlightjs();
+    pre,
+    code {
+        padding: 0;
+        margin: 0;
+    }
+
+    &__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>