@thinkpixellab-public/px-vue 4.0.16 → 4.0.18

package/.storybook/main.js

@@ -16,9 +16,9 @@ const config = {
     },
 
     docs: {
-        autodocs: true,
-        defaultName: 'Documentation',
+        defaultName: 'Documentation'
     },
+
     features: {
         interactionsDebugger: true,
     },

package/.storybook/preview.js

@@ -1,7 +1,5 @@
 import { setup } from '@storybook/vue3';
-import { themes } from '@storybook/theming';
 import common from '../plugins/common.js';
-
 import './preview.scss';
 
 // px-vue common plugins
@@ -11,7 +9,6 @@ setup(app => {
 
 const preview = {
     parameters: {
-        //actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -20,26 +17,10 @@ const preview = {
             },
         },
         order: ['Intro', 'Components'],
-        storySort: (a, b) =>
-            a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
-        // theme
-        // darkMode: {
-        //     // Override the default dark theme
-        //     dark: { ...themes.dark, appBg: '#2A2C2E' },
-        //     // Override the default light theme
-        //     light: { ...themes.normal },
-
-        //     darkClass: 'theme-dark',
-        //     lightClass: 'theme-light',
-        //     stylePreview: true,
-        //     classTarget: 'body',
-        // },
-
-        docs: {
-            // requires import { themes } from '@storybook/theming';
-            // theme: themes.dark,
-        },
+        storySort: (a, b) => a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+        docs: { },
     },
+    tags: ['autodocs']
 };
 
 export default preview;

package/.storybook/preview.scss

@@ -1,257 +1,3 @@
 @use '../styles/px.scss' as *;
 @use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
-
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Public+Sans:wght@300;400;500;600&family=Work+Sans:wght@400;600&display=swap');
-
-@if get('is-fluent', false) {
-    @font-face {
-        font-family: segoe-vf;
-        font-weight: 100;
-        src:
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.e452665.woff2)
-                format('woff2'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.68c90c4.woff)
-                format('woff'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.9d3d90d.ttf)
-                format('truetype');
-    }
-
-    @font-face {
-        font-family: segoe-vf;
-        font-weight: 300;
-        src:
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.1338e9a.woff2)
-                format('woff2'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.9c37400.woff)
-                format('woff'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.f65cf1c.ttf)
-                format('truetype');
-    }
-
-    @font-face {
-        font-family: segoe-vf;
-        font-weight: 400;
-        src:
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.e85854a.woff2)
-                format('woff2'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.f8bb08f.woff)
-                format('woff'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.dc5de3f.ttf)
-                format('truetype');
-    }
-
-    @font-face {
-        font-family: segoe-vf;
-        font-weight: 600;
-        src:
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.1977a17.woff2)
-                format('woff2'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.3326bd2.woff)
-                format('woff'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.0f5cc00.ttf)
-                format('truetype');
-    }
-
-    @font-face {
-        font-family: segoe-vf;
-        font-weight: 700;
-        src:
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.2756fcb.woff2)
-                format('woff2'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.65cd9e3.woff)
-                format('woff'),
-            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.4f8bd09.ttf)
-                format('truetype');
-    }
-    @include fluent-themes();
-}
-
-// .sbdocs-h2,
-// .sbdocs-h3,
-// .sbdocs-h4,
-// .sbdocs-h5,
-// .sbdocs h1:where(:not(.sb-unstyled h1)),
-// .sbdocs h2:where(:not(.sb-unstyled h2)),
-// .sbdocs h3:where(:not(.sb-unstyled h3)),
-// .sbdocs h4:where(:not(.sb-unstyled h4)),
-// .sbdocs h5:where(:not(.sb-unstyled h5)),
-// .sbdocs-title,
-// .sbdocs-content p,
-// .docblock-argstable,
-// .docblock-argstable tr,
-// .docblock-argstable th,
-// .docblock-argstable td,
-// .docblock-argstable td button {
-//     font-family: $font !important;
-// }
-
-// Update this to test font inheritance
-.sbdocs {
-    font-family: sans-serif;
-    perspective: 6000px;
-}
-
-body {
-    font-family: sans-serif;
-}
-
-.story-flex {
-    display: flex;
-    gap: 1em;
-    justify-content: center;
-    align-items: center;
-}
-
-.story-flex-top {
-    display: flex;
-    gap: 1em;
-    justify-content: center;
-    align-items: flex-start;
-}
-.story-flex-vert {
-    display: flex;
-    gap: 1em;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    flex-direction: column;
-}
-
-.story-flex-bounds {
-    @extend .story-flex;
-    > * {
-        @extend .story-bounds;
-    }
-}
-
-.story-bounds {
-    display: inline-block;
-    height: auto;
-    width: auto;
-    padding: 0;
-    margin: 0;
-    display: block;
-    border: 1px dashed rgba(black, 0.33);
-    perspective: 20em;
-}
-
-.story-square {
-    background-color: tomato;
-    width: 6em;
-    height: 6em;
-    border-radius: 0.5em;
-}
-
-.story-circle {
-    background-color: tomato;
-    width: 6em;
-    height: 6em;
-    border-radius: 100%;
-}
-
-.story-orange {
-    background-color: tomato;
-    padding: 0.5em;
-    color: white;
-    border-radius: 0.5em;
-}
-
-.story-fill {
-    background-color: tomato;
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-    color: white;
-}
-
-.story-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.story-aspect-16-9 {
-    background-color: tomato;
-    width: 100%;
-    border-radius: 8px;
-    aspect-ratio: 16/9;
-}
-
-.story-gradient {
-    background-image: repeating-linear-gradient(
-            -45deg,
-            rgba(black, 0.1) 0 20px,
-            rgba(black, 0) 20px 40px
-        ),
-        linear-gradient(135deg, tomato, purple);
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-}
-
-.story-state-blue {
-    background-color: dodgerblue;
-    color: white;
-    width: 3em;
-    height: 3em;
-    border-radius: 8px;
-    padding: 1em;
-}
-
-.story-state-orange {
-    background-color: tomato;
-    color: white;
-    width: 7em;
-    height: 7em;
-    border-radius: 8px;
-    padding: 1em;
-}
-
-.story-size-xs {
-    width: 2em;
-    height: 2em;
-}
-
-.story-size-sm {
-    width: 4em;
-    height: 4em;
-}
-
-.story-size-base {
-    width: 6em;
-    height: 6em;
-}
-.story-size-md {
-    width: 8em;
-    height: 8em;
-}
-
-.story-popup {
-    font-family: sans-serif;
-    padding: 1em;
-    @include popup();
-}
-
-.story-tooltip {
-    @include popup(
-        (
-            font-family: sans-serif,
-            padding: 0.5em,
-            font-size: 14px,
-            background-color: mix(dodgerblue, white, 15%),
-        )
-    );
-}
-
-// icons
-
-.story-inline-border {
-    display: inline-block;
-    border: 1px dotted tomato;
-    margin-inline: 0.25em;
-}
-
-.theme-dark {
-    background-color: #151617;
-    color: white;
-}
+@use '../storybook/sb-styles.scss' as *;

package/assets/icons/ellipsis.svg

@@ -1 +1,7 @@
-<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>
+<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

@@ -1 +1,5 @@
-<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>
+<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/bases/PxBaseIconProp.vue

@@ -0,0 +1,21 @@
+<script>
+import { PxIconSrcOrAttrs } from '../components/PxIcon.vue';
+
+export default {
+    props: {
+        /**
+         * The icon. 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 unused attributes get set on the element). See PxIcon for the
+         * full list of supported attributes.
+         */
+
+        icon: { type: [String, Object], default: null },
+    },
+    computed: {
+        iconAttrs() {
+            return PxIconSrcOrAttrs(this.icon);
+        },
+    },
+};
+</script>

package/bases/PxBaseItemsSelect.vue

@@ -43,6 +43,7 @@ export default {
         return {
             selectedKeys: [],
             baseUpdateMode: 'single',
+            isMounted: false,
         };
     },
 
@@ -122,7 +123,6 @@ export default {
                 if (nv != null) {
                     const name =
                         'bem' in this ? this.bem() : this.$options?.name || 'UnknownComponent';
-                    console.log(`nv: ${nv}`);
                     console.error(
                         `[MIGRATION] PxBaseItemsSelect (${name}): v-model has syntax has changed. Please replace <${name} v-model="mySelection" /> with <${name} v-model:selected="mySelection" />.`,
                     );
@@ -158,11 +158,16 @@ export default {
     },
 
     mounted() {
+        this.isMounted = true;
         this.$nextTick(() => {
             this.tryAutoSelect();
         });
     },
 
+    unmounted() {
+        this.isMounted = false;
+    },
+
     methods: {
         tryAutoSelect() {
             if (this.autoSelectFirst && isKeySetEmpty(this.selected) && this.items?.length) {
@@ -174,6 +179,10 @@ export default {
          * Emit the change / update:selected event
          */
         emitUpdateEvent() {
+            if (!this.isMounted) {
+                return;
+            }
+
             let updateArg;
 
             if (this.updateMode == 'single') {

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:662fa9e7fdd6eadb4b9edb11",
+  "zip": true
+}

package/components/PxArrowScroller.vue

@@ -207,7 +207,8 @@ export default {
     &__button {
         position: relative;
         align-self: center;
-        padding: 1em 0.75em;
+        padding: 0;
+        height: 1.25em;
 
         &--start {
             grid-area: arrow-start;
@@ -242,6 +243,9 @@ export default {
                 padding-left: 0;
                 padding-right: 0;
             }
+
+            min-height: 0.8em;
+            height: 100%;
         }
     }
 

package/components/PxBalancedText.vue

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

package/components/PxBaseColor.vue

@@ -0,0 +1,187 @@
+<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);
+        }
+
+        // TODO: default is hsva, but that isn't in the TINY_FORMATS list
+        // 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/PxCodeSample.vue

@@ -15,6 +15,13 @@
 </template>
 
 <script>
+// Note: for Nuxt projects, the following nuxt.config.js setting may be necessary:
+// vite: {
+//     optimizeDeps: {
+//         include: ['highlight.js'],
+//     }
+// }
+
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';

package/components/PxColorPalette.vue

@@ -23,10 +23,10 @@
 </template>
 
 <script>
-import PxBaseColor from '../bases/PxBaseColor.vue';
+import PxBaseColor from './PxBaseColor.vue';
 import tinycolor from 'tinycolor2';
 import PxColorPaletteButton from './PxColorPaletteButton.vue';
-import { PxColorPicker, PxColorPickerPropsFilter } from './PxColorPicker.vue';
+import PxColorPicker from './PxColorPicker.vue';
 
 export default {
     name: 'px-color-palette',
@@ -36,7 +36,8 @@ export default {
         /**
          * Array of colors to display in the palette
          */
-        palette: { type: Array, default: null },
+        palette: { type: Array, default: () => [] },
+        paletteInitColor: { type: String, default: null },
 
         // none | picker | eyedropper | eyedropper-only
         pickerMode: { type: String, default: 'none' },
@@ -76,26 +77,32 @@ export default {
                 'eyedropper-only': 'eyedropper',
             }[this.pickerMode];
 
-            return PxColorPickerPropsFilter({
+            return {
                 iconFallback,
                 eyedropperMode,
                 alphaEnabled: this.alphaEnabled,
                 ...this.pickerAttrs,
-            });
+            };
         },
         showPicker() {
             return this.pickerMode != 'none';
         },
     },
-    // watch: {},
+    watch: {
+        paletteInitColor(val) {
+            this.setColorHsva(this.colorStrToHsva(val));
+        },
+    },
     mounted() {},
     methods: {
         onPaletteClick(color) {
             this.pickerActive = false;
             this.setColorHsva(color.hsva);
+            this.$emit('paletteClick');
         },
         onPickerClick() {
             this.pickerActive = true;
+            this.$emit('pickerClick');
         },
         onPickerChange(e) {
             if (this.pickerActive) {