@thinkpixellab-public/px-vue 5.0.3 → 5.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 ## Storybook
 
-Basic component preview and testing can be done with storybook. Run storybook with `npm run dev-px`.
+Basic component preview and testing can be done with storybook. Run storybook with `pnpm storybook-px`.
 
 ## Migration Notes / Approach
 
@@ -73,8 +73,8 @@ watch: {
 
 ## Styles / Customization
 
--   **Component Fallbacks** Hardcoded values defined in the component style.
--   **Component Variants** Overrides defined within the component
+- **Component Fallbacks** Hardcoded values defined in the component style.
+- **Component Variants** Overrides defined within the component
 
 App Defaults App Scoped Defaults App Variants
 
@@ -162,29 +162,24 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 ### Project Setup
 
 ```sh
-npm install
+pnpm install
 ```
 
-#### Compile and Hot-Reload for Development
+#### Component preview & development with [Storybook](https://storybook.js.org/)
 
 ```sh
-npm run dev
-```
-
-#### Compile and Minify for Production
-
-```sh
-npm run build
+pnpm storybook
 ```
 
 #### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run test:unit
+pnpm test
 ```
 
-#### Lint with [ESLint](https://eslint.org/)
+#### Format with [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) and lint with [oxlint](https://oxc.rs/docs/guide/usage/linter.html)
 
 ```sh
-npm run lint
+pnpm format
+pnpm lint
 ```

package/bases/PxBaseScroll.vue

@@ -3,7 +3,6 @@
 -->
 
 <script>
-
 export default {
     // components: { Component },
     // mixins: [ Mixin ],

package/components/PxColorPanel.vue

@@ -169,7 +169,8 @@ export default {
         width: 100%;
         border-radius: var(--px-color-panel-radius);
 
-        background-image: linear-gradient(rgba(0, 0, 0, 0), #000),
+        background-image:
+            linear-gradient(rgba(0, 0, 0, 0), #000),
             linear-gradient(90deg, #fff, var(--px-color-panel-hsl-hue));
     }
 

package/components/PxSelectionBar.vue

@@ -14,7 +14,6 @@
 import PxBaseResize from '../bases/PxBaseResize.vue';
 import { getClientRect } from '../utils/utils';
 
-
 export default {
     name: 'px-selection-bar',
     // components: { Component },

package/components/PxValidator.vue

@@ -197,7 +197,6 @@ export default {
                 }
 
                 // Object
-
                 // Expects an object like {required: true, regex: '...', myvalidator:(value) => {...} }
                 // Use this format for more complex or customized validation rules.
                 else if (t == 'object') {

package/composables/loadGsap.js

@@ -2,7 +2,7 @@
 
 /**
  * Lazy loading utilities for GSAP and ScrollTrigger
- * 
+ *
  * These functions provide race-condition-safe loading of GSAP libraries.
  * They ensure single initialization even with concurrent calls.
  */
@@ -12,13 +12,13 @@ let scrollTriggerPromise = null;
 
 /**
  * Loads the GSAP library lazily
- * 
+ *
  * @returns {Promise} Promise that resolves to the GSAP instance
- * 
+ *
  * @example
  * // Direct usage (not recommended - use useGsap composable instead)
  * import { loadGsap } from '@thinkpixellab-public/px-vue/composables/loadGsap';
- * 
+ *
  * const gsap = await loadGsap();
  * gsap.to('.element', { x: 100 });
  */
@@ -31,15 +31,15 @@ export const loadGsap = async () => {
 
 /**
  * Loads GSAP with ScrollTrigger plugin registered
- * 
+ *
  * @returns {Promise} Promise that resolves to { gsap, ScrollTrigger }
- * 
+ *
  * @example
  * // Direct usage (not recommended - use useScrollAnimation composable instead)
  * import { loadScrollTrigger } from '@thinkpixellab-public/px-vue/composables/loadGsap';
- * 
+ *
  * const { gsap, ScrollTrigger } = await loadScrollTrigger();
- * 
+ *
  * gsap.to('.element', {
  *   x: 100,
  *   scrollTrigger: {
@@ -52,9 +52,9 @@ export const loadScrollTrigger = async () => {
     if (!scrollTriggerPromise) {
         scrollTriggerPromise = (async () => {
             const [gsap, { ScrollTrigger }, { CSSPlugin }] = await Promise.all([
-                loadGsap(), 
+                loadGsap(),
                 import('gsap/ScrollTrigger'),
-                import('gsap/CSSPlugin')
+                import('gsap/CSSPlugin'),
             ]);
             gsap.registerPlugin(ScrollTrigger, CSSPlugin);
             return { gsap, ScrollTrigger };

package/package.json

@@ -1,12 +1,29 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "5.0.3",
+    "version": "5.2.0",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
     },
     "license": "MIT",
     "type": "module",
+    "engines": {
+        "node": ">=24 <25"
+    },
+    "packageManager": "pnpm@11.5.2",
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "assets",
+        "bases",
+        "components",
+        "composables",
+        "plugins",
+        "styles",
+        "utils",
+        "nuxt-module.js"
+    ],
     "repository": {
         "type": "git",
         "url": "git+https://github.com/thinkpixellab/px-vue.git"
@@ -16,62 +33,63 @@
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "test": "vitest",
-        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js",
-        "chromatic": "npx chromatic --project-token=chpt_30d6cbeac803e5a"
+        "test:run": "vitest run",
+        "chromatic": "npx chromatic --project-token=chpt_30d6cbeac803e5a",
+        "format": "oxfmt --write .",
+        "format:check": "oxfmt --check .",
+        "lint": "oxlint",
+        "lint:fix": "oxlint --fix",
+        "prepare": "git config core.hooksPath .githooks || true"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/dom": "^1.7.6",
         "@popperjs/core": "^2.11.8",
-        "@thinkpixellab-public/px-styles": "^4.1.5",
+        "@thinkpixellab-public/px-styles": "^4.2.1",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
-        "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",
-        "chrono-node": "^2.7.8",
+        "chrono-node": "^2.9.1",
         "dateformat": "^5.0.3",
         "figma-squircle": "^1.1.0",
-        "gsap": "^3.13.0",
+        "gsap": "^3.15.0",
         "highlight.js": "^11.11.1",
-        "lenis": "^1.1.17",
+        "lenis": "^1.3.23",
         "mitt": "^3.0.1",
         "qr-code-styling": "^1.9.2",
-        "sortablejs": "^1.15.6",
+        "sortablejs": "^1.15.7",
         "throttle-debounce": "^5.0.2",
         "tiny-date-picker": "^3.2.8",
         "tinycolor2": "^1.6.0",
-        "vue-inline-svg": "^3.1.4"
+        "vue-inline-svg": "^4.0.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@chromatic-com/storybook": "^3.2.6",
-        "@nuxt/kit": "^4.2.2",
-        "@rushstack/eslint-patch": "^1.11.0",
-        "@storybook/addon-essentials": "^8.6.7",
-        "@storybook/addon-interactions": "^8.6.7",
-        "@storybook/addon-links": "^8.6.7",
-        "@storybook/addon-mdx-gfm": "^8.6.7",
-        "@storybook/blocks": "^8.6.7",
-        "@storybook/manager-api": "^8.6.7",
-        "@storybook/test": "^8.6.7",
-        "@storybook/theming": "^8.6.7",
-        "@storybook/vue3": "^8.6.7",
-        "@storybook/vue3-vite": "^8.6.7",
-        "@vitejs/plugin-vue": "^5.2.3",
-        "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/test-utils": "^2.4.6",
-        "babel-eslint": "^10.1.0",
-        "chromatic": "^11.27.0",
-        "eslint": "^9.22.0",
-        "eslint-plugin-storybook": "^0.11.6",
-        "eslint-plugin-vue": "^9.32.0",
-        "jsdom": "^26.0.0",
-        "prettier": "^3.5.3",
-        "sass": "^1.83.4",
-        "storybook": "^8.6.7",
-        "storybook-addon-pseudo-states": "^4.0.3",
-        "storybook-dark-mode": "^4.0.2",
-        "vite": "^6.2.2",
-        "vitest": "^3.0.9",
-        "vue-loader": "^17.4.2"
+        "@chromatic-com/storybook": "^5.2.1",
+        "@nuxt/kit": "^4.4.7",
+        "@storybook/addon-docs": "^10.4.2",
+        "@storybook/addon-links": "^10.4.2",
+        "@storybook/vue3": "^10.4.2",
+        "@storybook/vue3-vite": "^10.4.2",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vue/test-utils": "^2.4.11",
+        "@vueless/storybook-dark-mode": "^10.0.8",
+        "chromatic": "^17.2.0",
+        "jsdom": "^29.1.1",
+        "oxfmt": "^0.53.0",
+        "oxlint": "^1.68.0",
+        "sass": "^1.100.0",
+        "storybook": "^10.4.2",
+        "storybook-addon-pseudo-states": "^10.4.2",
+        "vite": "^8.0.16",
+        "vitest": "^4.1.8",
+        "vue": "^3.5.35"
+    },
+    "peerDependencies": {
+        "@nuxt/kit": "^3.0.0 || ^4.0.0",
+        "vue": "^3.2.25"
+    },
+    "peerDependenciesMeta": {
+        "@nuxt/kit": {
+            "optional": true
+        }
     },
     "bugs": {
         "url": "https://github.com/thinkpixellab/px-vue/issues"

package/plugins/common-client.js

@@ -1,5 +1,4 @@
 import mitt from 'mitt';
-import resize from '@thinkpixellab-public/vue-resize-directive';
 
 export default {
     install: app => {
@@ -18,7 +17,5 @@ export default {
         app.config.globalProperties.$globalOff = function (eventName, fn) {
             $eventBus.off(eventName, fn);
         };
-
-        app.directive('resize', resize);
     },
 };

package/plugins/common.js

@@ -56,9 +56,6 @@ export default {
             // $eventBus is only client-side but we want to avoid warnings about missing $eventBus
             // for inject called during setup on server-side.
             app.provide('$eventBus', null);
-
-            // v-resize is only client-side but we want to avoid warnings about missing directive
-            app.directive('resize', {});
         }
     },
 };

package/utils/SharedHeightManager.js

@@ -88,11 +88,11 @@ class HeightGroup {
                 console.log(`ignore: ${ignore}`);
                 console.log(
                     'valid heights:',
-                    heights.filter(height => height <= ignore)
+                    heights.filter(height => height <= ignore),
                 );
                 console.log(
                     'invalid heights:',
-                    heights.filter(height => height > ignore)
+                    heights.filter(height => height > ignore),
                 );
             }
         }, this.ops.debounce);

package/utils/cardGridLayoutHelper.js

@@ -526,7 +526,7 @@ const reverseTemplate = template => {
 const mergeH = (a, b) => {
     if (!a || !a.length || !b || b.length || a.length !== b.length) {
         console.warn(
-            'Cannot horizontally merge empty templates or templates of different lengths.'
+            'Cannot horizontally merge empty templates or templates of different lengths.',
         );
         return [];
     }

package/utils/scrollWatcher.js

@@ -109,19 +109,19 @@ class ScrollWatcherElement {
                 // If element is smaller than viewport...
                 // overlapping begins when the bottom of the element meets the bottom of the viewport
                 this.calc.progressBegin = Math.round(
-                    this.calc.elementRect.bottom - this.calc.viewport.bottom
+                    this.calc.elementRect.bottom - this.calc.viewport.bottom,
                 );
                 this.calc.progressDuration = Math.round(
-                    this.calc.viewport.height - this.calc.elementRect.height
+                    this.calc.viewport.height - this.calc.elementRect.height,
                 );
             } else {
                 // If element is larger than viewport...
                 // begin when the top of the element is at the top of the viewport
                 this.calc.progressBegin = Math.round(
-                    this.calc.elementRect.top - this.calc.viewport.top
+                    this.calc.elementRect.top - this.calc.viewport.top,
                 );
                 this.calc.progressDuration = Math.round(
-                    this.calc.elementRect.height - this.calc.viewport.height
+                    this.calc.elementRect.height - this.calc.viewport.height,
                 );
             }
         } else {
@@ -129,10 +129,10 @@ class ScrollWatcherElement {
             // Occurs as any part of the element is within any part of the viewport
 
             this.calc.progressBegin = Math.round(
-                this.calc.elementRect.top - this.calc.viewport.bottom
+                this.calc.elementRect.top - this.calc.viewport.bottom,
             );
             this.calc.progressDuration = Math.round(
-                this.calc.viewport.height + this.calc.elementRect.height
+                this.calc.viewport.height + this.calc.elementRect.height,
             );
         }
 

package/utils/smootherCorners.js

@@ -175,16 +175,14 @@ export function getSmoothCornersPath(options = {}) {
 
     // calculate corner radii with percentage support and clamping
     const radii = calculateCornerRadii(radius, adjustedWidth, adjustedHeight, minRadius, maxRadius);
-    
+
     // check if all radii are 0 - no need for clipping/masking
     if (radii.every(r => r === 0)) {
         return null;
     }
-    
+
     // adjust radii for inner path when borderWidth is present
-    const adjustedRadii = borderWidth > 0 
-        ? radii.map(r => Math.max(0, r - borderWidth))
-        : radii;
+    const adjustedRadii = borderWidth > 0 ? radii.map(r => Math.max(0, r - borderWidth)) : radii;
 
     const path = generateSquirclePath(
         adjustedWidth,
@@ -214,13 +212,13 @@ export function getSmoothCornersPath(options = {}) {
  */
 export function getBorderMaskStyles(options = {}) {
     const { width, height, borderWidth = 0 } = options;
-    
+
     if (width <= 0 || height <= 0 || borderWidth <= 0) return null;
-    
+
     // Create the inner path (smaller for content area)
     const innerPath = getSmoothCornersPath({
-        width: width - (borderWidth * 2),
-        height: height - (borderWidth * 2),
+        width: width - borderWidth * 2,
+        height: height - borderWidth * 2,
         radius: options.radius,
         smoothing: options.smoothing,
         borderWidth: 0,
@@ -228,13 +226,13 @@ export function getBorderMaskStyles(options = {}) {
         maxRadius: options.maxRadius,
         preserveSmoothing: options.preserveSmoothing,
     });
-    
+
     if (!innerPath) return null;
-    
+
     // Position the inner mask to create border space
     const maskPosition = `${borderWidth}px ${borderWidth}px`;
-    const maskSize = `${width - (borderWidth * 2)}px ${height - (borderWidth * 2)}px`;
-    
+    const maskSize = `${width - borderWidth * 2}px ${height - borderWidth * 2}px`;
+
     return {
         WebkitMask: `radial-gradient(white, white), ${innerPath}`,
         mask: `radial-gradient(white, white), ${innerPath}`,
@@ -245,7 +243,7 @@ export function getBorderMaskStyles(options = {}) {
         WebkitMaskSize: `100% 100%, ${maskSize}`,
         maskSize: `100% 100%, ${maskSize}`,
         WebkitMaskRepeat: 'no-repeat, no-repeat',
-        maskRepeat: 'no-repeat, no-repeat'
+        maskRepeat: 'no-repeat, no-repeat',
     };
 }
 
@@ -257,54 +255,54 @@ export function getBorderMaskStyles(options = {}) {
  */
 export function getBorderMaskClipPath(options = {}) {
     const { width, height, borderWidth = 0, renderMode = 'clip-path' } = options;
-    
+
     if (width <= 0 || height <= 0 || borderWidth <= 0) return null;
-    
+
     // Check if the border is too large for the element
     if (borderWidth * 2 >= width || borderWidth * 2 >= height) return null;
-    
+
     // Create outer rectangle path (clockwise)
     const rectPath = `M 0 0 H ${width} V ${height} H 0 Z`;
-    
+
     // Generate the inner smooth path directly at the correct size and position
-    const innerWidth = width - (borderWidth * 2);
-    const innerHeight = height - (borderWidth * 2);
-    
+    const innerWidth = width - borderWidth * 2;
+    const innerHeight = height - borderWidth * 2;
+
     // Calculate radii for the outer dimensions first
     const outerRadii = calculateCornerRadii(
         options.radius,
         width,
         height,
         options.minRadius || 0,
-        options.maxRadius || Infinity
+        options.maxRadius || Infinity,
     );
-    
+
     // check if all radii are 0 - no need for border masking
     if (outerRadii.every(r => r === 0)) {
         return null;
     }
-    
+
     // Adjust radii for the inner path by subtracting border width
     // This ensures consistent border thickness around corners
     const innerRadii = outerRadii.map(r => Math.max(0, r - borderWidth));
-    
+
     // Generate the inner path with adjusted radii
     const innerSmoothPath = generateSquirclePath(
         innerWidth,
         innerHeight,
         innerRadii,
         options.smoothing || 0.8,
-        options.preserveSmoothing !== false
+        options.preserveSmoothing !== false,
     );
-    
+
     if (!innerSmoothPath) return null;
-    
+
     // Apply offset to position the inner path
     const offsetInnerPath = applyPathOffset(innerSmoothPath, borderWidth, borderWidth);
-    
+
     // Combine the paths
     const combinedPath = `${rectPath} ${offsetInnerPath}`;
-    
+
     // Return format based on render mode
     if (renderMode === 'mask') {
         return createSvgBorderMaskDataUrl(combinedPath, width, height);
@@ -313,7 +311,6 @@ export function getBorderMaskClipPath(options = {}) {
     }
 }
 
-
 /**
  * Create SVG mask data URL from path string
  * @param {string} pathString - SVG path string
@@ -331,14 +328,14 @@ export function createSvgMaskDataUrl(pathString, width, height) {
         </defs>
         <rect width="100%" height="100%" fill="white" mask="url(#smooth-mask)"/>
     </svg>`;
-    
+
     return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}')`;
 }
 
 /**
  * Create SVG border mask data URL using compound path approach
  * @param {string} compoundPathString - Compound path string (outer rect + inner hole)
- * @param {number} width - Mask width  
+ * @param {number} width - Mask width
  * @param {number} height - Mask height
  * @returns {string} Data URL for SVG border mask
  */
@@ -351,7 +348,7 @@ export function createSvgBorderMaskDataUrl(compoundPathString, width, height) {
         </defs>
         <rect width="100%" height="100%" fill="white" mask="url(#border-mask)"/>
     </svg>`;
-    
+
     return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}')`;
 }
 
@@ -376,11 +373,9 @@ export function generateSmoothCornersConfig(options = {}) {
     const adjustedHeight = Math.max(0, height - borderWidth * 2);
 
     const radii = calculateCornerRadii(radius, adjustedWidth, adjustedHeight, minRadius, maxRadius);
-    
+
     // adjust radii for inner path when borderWidth is present
-    const adjustedRadii = borderWidth > 0 
-        ? radii.map(r => Math.max(0, r - borderWidth))
-        : radii;
+    const adjustedRadii = borderWidth > 0 ? radii.map(r => Math.max(0, r - borderWidth)) : radii;
 
     return {
         width: adjustedWidth,

package/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-    root: true,
-    env: {
-        node: true,
-    },
-    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
-    parserOptions: {
-        parser: 'babel-eslint',
-    },
-    rules: {
-        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    },
-};

package/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-    "semi": true,
-    "arrowParens": "avoid",
-    "singleQuote": true,
-    "tabWidth": 4,
-    "printWidth": 100,
-    "bracketSpacing": true,
-    "htmlWhitespaceSensitivity": "ignore",
-    "endOfLine": "auto"
-}

package/.storybook/main.js

@@ -1,26 +0,0 @@
-/** @type { import('@storybook/vue3-vite').StorybookConfig } */
-const config = {
-    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
-        '@chromatic-com/storybook',
-        'storybook-addon-pseudo-states',
-        'storybook-dark-mode',
-    ],
-
-    framework: {
-        name: '@storybook/vue3-vite',
-        options: {},
-    },
-
-    docs: {
-        defaultName: 'Documentation'
-    },
-
-    features: {
-        interactionsDebugger: true,
-    },
-};
-export default config;

package/.storybook/manager.js

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import { themes } from '@storybook/theming';
-
-addons.setConfig({
-    theme: themes.dark,
-});

package/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<script>
-    window.global = window;
-</script>

package/.storybook/preview.js

@@ -1,26 +0,0 @@
-import { setup } from '@storybook/vue3';
-import common from '../plugins/common.js';
-import './preview.scss';
-
-// px-vue common plugins
-setup(app => {
-    app.use(common);
-});
-
-const preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/,
-                string: /(itemsKey|itemsDisabled)$/i,
-            },
-        },
-        order: ['Intro', 'Components'],
-        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,3 +0,0 @@
-@use '../styles/px.scss' as *;
-@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
-@use '../storybook/sb-styles.scss' as *;