@thinkpixellab-public/px-vue 4.0.11 → 4.0.13

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 '../bases/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,144 @@
+<template>
+    <div :class="bem()">
+        <PxColorPaletteButton @click="click" :hsva="hsva" :selected="selected" :pending="pending">
+            <PxIcon :class="bem('icon')" v-bind="calcIconAttrs" :style="{ color: calcIconColor }" />
+        </PxColorPaletteButton>
+        <PxFloat
+            :popupClass="bem('popup')"
+            v-model:visible="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 '../bases/PxBaseColor.vue';
+import propsFilter from '../utils/propsFilter.js';
+import { PxIcon, PxIconSrcOrAttrs } from './PxIcon.vue';
+import EyeDropperSvg from '../assets/icons/eyedropper.svg';
+import EllipsisSvg from '../assets/icons/ellipsis.svg';
+
+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 PxIconSrcOrAttrs(this.icon);
+            } else if (this.iconFallback) {
+                switch (this.iconFallback) {
+                    case 'eyedropper':
+                        return { src: EyeDropperSvg, size: 0.9 };
+                    case 'ellipsis':
+                        return { src: EllipsisSvg };
+                }
+            }
+        },
+        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;
+            }
+        },
+    },
+};
+
+// helper function that filters out props that are not defined in the component when using v-bind to
+// set PxColorFilter props
+function PxColorPickerPropsFilter(attrs) {
+    return propsFilter(PxColorPicker)(attrs);
+}
+
+// defaut export
+export default PxColorPicker;
+
+// named exports
+export { PxColorPicker, PxColorPickerPropsFilter };
+</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/components/PxFlex.vue

@@ -32,7 +32,7 @@ export default {
         wrap: { type: Boolean, default: false },
 
         /** Equivalent to the align-items css property (aligns items relative to each other). */
-        align: { type: String, default: 'center', validator: val => alignments.includes(val) },
+        align: { type: String, default: 'start', validator: val => alignments.includes(val) },
 
         /** Maps to the justify-content css property (justifies the content within the container). */
         justify: { type: String, default: 'start', validator: val => alignments.includes(val) },

package/components/PxIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <component :class="bem()" v-if="svgComponent" :is="svgComponent" v-bind="bindAttrs" />
+    <PxSvgRender v-if="isSvgString" :class="bem()" :svg="svgString" v-bind="bindAttrs" />
     <inline-svg
         v-else
         :class="bem()"
@@ -13,6 +13,7 @@
 <script>
 import InlineSvg from 'vue-inline-svg';
 import PxBaseSvg from '../bases/PxBaseSvg.vue';
+import PxSvgRender from './PxSvgRender.vue';
 import { cssNum, cssEmFallback, cssPx } from '../utils/cssStr.js';
 import propsFilter from '../utils/propsFilter.js';
 
@@ -70,7 +71,7 @@ export default defineNuxtPlugin(nuxtApp => {
 const PxIcon = {
     name: 'px-icon',
     mixins: [PxBaseSvg],
-    components: { InlineSvg },
+    components: { InlineSvg, PxSvgRender },
     props: {
         /**
          * A string that either represents the key (name) of an app-level icon or the svg src for
@@ -183,8 +184,6 @@ const PxIcon = {
             return this.transformDefault(svg);
         },
     },
-
-    // mounted() {},
 };
 
 // helper function that filters out props that are not defined in the component when using v-bind to
@@ -193,11 +192,26 @@ function PxIconPropsFilter(attrs) {
     return propsFilter(PxIcon)(attrs);
 }
 
+// helper function that makes that creates PxIcon attributes from a src string or attrs object
+function PxIconSrcOrAttrs(srcOrAttrs, size = 1) {
+    if (!srcOrAttrs) {
+        return null;
+    }
+
+    // if the src is a string, we assume it is the src attribute
+    if (typeof srcOrAttrs === 'string') {
+        return { src: srcOrAttrs, size };
+    }
+
+    // if the src is an object, we assume it is the attrs object
+    return PxIconPropsFilter(srcOrAttrs);
+}
+
 // defaut export
 export default PxIcon;
 
 // named exports
-export { PxIcon, PxIconPropsFilter };
+export { PxIcon, PxIconPropsFilter, PxIconSrcOrAttrs };
 </script>
 
 <style lang="scss">

package/components/PxIconButton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { PxIcon, PxIconPropsFilter } from './PxIcon.vue';
+import { PxIcon, PxIconSrcOrAttrs } from './PxIcon.vue';
 import PxBase from '../bases/PxBase.vue';
 import PxBaseToggle from '../bases/PxBaseToggle.vue';
 
@@ -75,14 +75,7 @@ export default {
                 };
             }
 
-            if (typeof this.icon === 'string') {
-                return {
-                    src: this.icon,
-                    size: this.size || 1,
-                };
-            }
-
-            return PxIconPropsFilter(this.icon);
+            return PxIconSrcOrAttrs(this.icon);
         },
 
         calcIconChecked() {
@@ -132,6 +125,8 @@ export default {
 .px-icon-button {
     // VARIANTS
 
+    @include control-reset();
+
     &--default {
         @include controls.button-icon(
             (

package/components/PxLabeledInput.vue

@@ -0,0 +1,54 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem({ ...variantsMap })">
+        <label :for="calcInputId" :class="[bem('label'), labelClass]">
+            <slot name="label">
+                {{ label }}
+            </slot>
+        </label>
+        <slot name="default" :id="calcInputId" />
+    </div>
+</template>
+
+<script>
+import PxBaseUniqueId from '../bases/PxBaseUniqueId.vue';
+import PxBaseVariants from '../bases/PxBaseVariants.vue';
+
+export default {
+    name: 'px-labeled-input',
+    // components: { Component },
+    mixins: [PxBaseUniqueId, PxBaseVariants],
+    props: {
+        label: { type: String, default: 'Input' },
+        labelClass: { type: [String, Array], default: null },
+        prefix: { type: String, default: 'input' },
+        inputId: { type: String, default: null },
+    },
+    // data() { return { b: 0 }; },
+    computed: {
+        calcInputId() {
+            if (this.inputId) {
+                return this.inputId;
+            } else {
+                return this.uniqueId(this.prefix);
+            }
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-labeled-input {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.5em;
+}
+</style>