@thinkpixellab-public/px-vue 4.0.15 → 4.0.17

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 @@
-<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 @@
-<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

@@ -122,7 +122,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" />.`,
                     );

package/chromatic.config.json

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

package/components/PxArrowScroller.vue

@@ -53,8 +53,8 @@ ar
 import PxBaseResize from '../bases/PxBaseResize.vue';
 import PxIconButton from './PxIconButton.vue';
 import PxIcon from './PxIcon.vue';
-import arrowStartIconDefault from '../assets/feather/arrow-left.svg?url';
-import arrowEndIconDefault from '../assets/feather/arrow-right.svg?url';
+// import arrowStartIconDefault from '../assets/feather/arrow-left.svg?url';
+// import arrowEndIconDefault from '../assets/feather/arrow-right.svg?url';
 import { svgArrow } from '../utils/svgIcons.js';
 
 import propsFilter from '../utils/propsFilter.js';
@@ -64,7 +64,7 @@ import propsFilter from '../utils/propsFilter.js';
 Creates a horizontally scrolling container with an invisible scrollbar and arrows on either side.
 
 ```html
-<px-arrow-scroller :arrow-start-src="require(...)" :arrow-end-src="require(...)">
+<px-arrow-scroller :arrow-start-src="yourCustomArrowStartIcon" :arrow-end-src="yourCustomArrowEndIcon">
 
     <template #button="{location}">
         // this can look like a button but it will ultimately be wrapped by a button

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

@@ -1,6 +1,3 @@
-<!--
-    Describe this component...
--->
 <template>
     <div :class="bem()">
         <PxColorPaletteButton
@@ -36,7 +33,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' },
@@ -87,15 +85,21 @@ export default {
             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) {

package/components/PxColorPaletteButton.vue

@@ -1,6 +1,3 @@
-<!--
-    Describe this component...
--->
 <template>
     <button :class="bem({ selected, pending })" :style="{ color: hslaStr }">
         <span />

package/components/PxColorPicker.vue

@@ -140,5 +140,10 @@ export { PxColorPicker, PxColorPickerPropsFilter };
         background-color: var(--px-color-picker-popup-bg);
         @include depth-shadow(20, 0.15);
     }
+
+    &__icon {
+        position: relative;
+        z-index: 1;
+    }
 }
 </style>

package/components/PxFloat.vue

@@ -10,8 +10,8 @@
     >
         <transition
             :name="calcTransitionName"
-            @before-enter="transitionVisible = true"
-            @after-leave="transitionVisible = false"
+            @before-enter="transitionBeforeEnter"
+            @after-leave="transitionAfterLeave"
         >
             <div
                 :class="[rootClass, bem({ ...variantsMap, absolute: strategy == 'absolute' })]"
@@ -55,7 +55,7 @@
 <script>
 import PxBaseVariants from '../bases/PxBaseVariants.vue';
 import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 
 const FOCUS_ELEMENTS = [
     'button',
@@ -290,7 +290,7 @@ export default {
     computed: {
         // the name of the transition to use ()
         calcTransitionName() {
-            if (this.transitionName) {
+            if (this.transitionName !== null) {
                 return this.transitionName;
             }
 
@@ -407,9 +407,7 @@ export default {
                         }
                     }
                 } else {
-                    if (globalLayerIndex <= globalClearLayerIndex) {
-                        globalClearLayerIndex = 0;
-                    }
+                    // see watcher for transitionVisible
                 }
 
                 // show and hide events (also see beforeshow/beforehide in visibleValue watcher)
@@ -423,9 +421,10 @@ export default {
             });
         },
 
-        transitionVisible(ov, nv) {
-            if (!nv) {
+        transitionVisible() {
+            if (!this.transitionVisible) {
                 this.$emit('afterhide');
+                enableBodyScroll(this.$refs.popup, { reserveScrollBarGap: true });
             }
         },
     },
@@ -635,6 +634,14 @@ export default {
         getPopupElement() {
             return this.$refs.popup;
         },
+
+        transitionBeforeEnter() {
+            this.transitionVisible = true;
+        },
+
+        transitionAfterLeave() {
+            this.transitionVisible = false;
+        },
     },
 };
 </script>

package/components/PxIcon.vue

@@ -189,7 +189,7 @@ const PxIcon = {
 // helper function that filters out props that are not defined in the component when using v-bind to
 // set icon props
 function PxIconPropsFilter(attrs) {
-    return propsFilter(PxIcon)(attrs);
+    return propsFilter(PxIcon, ['class', 'style'])(attrs);
 }
 
 // helper function that makes that creates PxIcon attributes from a src string or attrs object

package/components/PxIconButton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { PxIcon, PxIconSrcOrAttrs } from './PxIcon.vue';
+import { PxIcon, PxIconSrcOrAttrs, PxIconPropsFilter } from './PxIcon.vue';
 import PxBase from '../bases/PxBase.vue';
 import PxBaseToggle from '../bases/PxBaseToggle.vue';
 

package/components/PxQrCode.vue

@@ -14,6 +14,7 @@
             :size="size"
             :margin="padding"
             :aria-label="label || content"
+            level="M"
         ></qrcode-vue>
     </div>
 </template>

package/components/PxTable.vue

@@ -341,7 +341,9 @@ export default {
         }
     },
     beforeUnmount() {
-        this.sortable.destroy();
+        if (this.sortable) {
+            this.sortable.destroy();
+        }
     },
     methods: {
         getItemValue(item, column) {

package/components/PxToggle.vue

@@ -7,6 +7,7 @@
         aria-role="switch"
         :aria-checked="checkedValue"
         @click="toggleChecked"
+        :type="buttonType"
     >
         <span
             :class="[bem('track'), trackClass]"
@@ -66,6 +67,9 @@ export default {
 
         /** Toggle the label/toggle order */
         reverse: { type: Boolean, default: false },
+
+        // 'submit' (default for <button> if not set), 'reset' (resets form) or 'button' (no action)
+        buttonType: { type: String, default: 'button' },
     },
 };
 </script>