@thinkpixellab-public/px-vue 4.1.24 → 4.1.27

package/bases/PxBaseItemsSelect.vue

@@ -139,15 +139,19 @@ export default {
             immediate: true,
             handler(nv, ov) {
                 // check for matching values
-                if (nv && ov && nv.length == ov.length) {
+                const nvArray = ensureSet(nv);
+                const ovArray = ensureSet(ov);
+
+                if (nvArray.length === ovArray.length) {
                     let match = true;
-                    for (let i = 0; i < nv.length; i++) {
-                        match = match && nv[i] == ov[i];
+                    for (let i = 0; i < nvArray.length; i++) {
+                        match = match && nvArray[i] === ovArray[i];
                     }
                     if (match) {
                         return;
                     }
                 }
+
                 this.setSelection(nv);
             },
         },

package/components/PxCard.vue

@@ -21,7 +21,7 @@ export default {
 .px-card {
     /// Configuration defautls for px-calendar
     $-defaults: (
-        'px-card.background-color': color(page-bg),
+        'px-card.background-color': site-var(page-bg),
         'px-card.padding': 1rem,
         'px-card.border-radius': 0.5rem,
         'px-card.box-shadow': depth-shadow(20, 0.1, black),

package/components/PxCorners.vue

@@ -0,0 +1,233 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div
+        v-if="smoothingEnabled"
+        :class="bem()"
+        ref="el"
+        :style="{
+            position: 'relative',
+            clipPath: renderMode === 'clip' ? smoothCornersPath : null,
+            mask: renderMode === 'mask' ? smoothCornersPath : null,
+            ...overrideStyles,
+        }"
+    >
+        <div
+            v-if="hasBorder"
+            :style="{
+                position: 'absolute',
+                inset: 0,
+                clipPath: renderMode === 'clip' ? borderMaskPath : null,
+                mask: renderMode === 'mask' ? borderMaskPath : null,
+                backgroundColor: computedBorderColor,
+                touchAction: 'none',
+            }"
+        ></div>
+
+        <slot />
+    </div>
+
+    <div v-else>
+        <slot />
+    </div>
+</template>
+
+<script>
+import { getSmoothCornersPath, getBorderMaskClipPath } from '../utils/smootherCorners';
+
+export default {
+    name: 'px-corners',
+    props: {
+        smoothingEnabled: { type: Boolean, default: true },
+        smoothing: { type: Number, default: 1 },
+        maxRadius: { type: [Number, String], default: Infinity },
+        minRadius: { type: [Number, String], default: 0 },
+        radius: { type: [Array, Number, String], default: 'auto' },
+        borderWidth: { type: [Number, String], default: 'auto' },
+        borderColor: { type: String, default: 'auto' },
+
+        // clip or mask
+        renderMode: { type: String, default: 'clip' },
+    },
+    data() {
+        return {
+            dimensions: {
+                width: 0,
+                height: 0,
+            },
+            computedRadius: null,
+            computedBorderWidth: 0,
+            computedBorderColor: null,
+            resizeObserver: null,
+
+            // flag that we've detected auto styles
+            autoStylesDetected: false,
+        };
+    },
+    computed: {
+        smoothCornersPath() {
+            if (
+                !this.smoothingEnabled ||
+                this.dimensions.width <= 0 ||
+                this.dimensions.height <= 0
+            ) {
+                return null;
+            }
+
+            return getSmoothCornersPath({
+                width: this.dimensions.width,
+                height: this.dimensions.height,
+                radius: this.computedRadius || this.radius,
+                smoothing: this.smoothing,
+                borderWidth: 0,
+                minRadius: this.minRadius,
+                maxRadius: this.maxRadius,
+                preserveSmoothing: true,
+                renderMode: this.renderMode,
+            });
+        },
+        borderMaskPath() {
+            if (
+                !this.smoothingEnabled ||
+                this.dimensions.width <= 0 ||
+                this.dimensions.height <= 0 ||
+                this.computedBorderWidth <= 0
+            ) {
+                return null;
+            }
+
+            return getBorderMaskClipPath({
+                width: this.dimensions.width,
+                height: this.dimensions.height,
+                radius: this.computedRadius || this.radius,
+                smoothing: this.smoothing,
+                borderWidth: this.computedBorderWidth,
+                minRadius: this.minRadius,
+                maxRadius: this.maxRadius,
+                preserveSmoothing: true,
+                renderMode: this.renderMode,
+            });
+        },
+        hasBorder() {
+            return !!this.borderMaskPath;
+        },
+        overrideStyles() {
+            if (!this.smoothingEnabled || !this.autoStylesDetected) return {};
+
+            return {
+                borderRadius: 'unset',
+                borderTopLeftRadius: 'unset',
+                borderTopRightRadius: 'unset',
+                borderBottomRightRadius: 'unset',
+                borderBottomLeftRadius: 'unset',
+                border: 'unset',
+                borderWidth: 'unset',
+                borderStyle: 'unset',
+                borderColor: 'unset',
+            };
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (!this.$refs.el) return;
+            if (!this.smoothingEnabled) return;
+
+            this.detectAutoValues();
+            this.updateDimensions();
+            this.setupResizeObserver();
+        });
+    },
+    beforeUnmount() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    },
+    methods: {
+        parseCssDimension(value) {
+            if (typeof value === 'string' && value.length > 0) {
+                value = value.trim().split(/\s+/)[0];
+
+                if (value.endsWith('px')) return parseFloat(value);
+                if (value.endsWith('rem')) {
+                    return (
+                        parseFloat(value) *
+                        parseFloat(getComputedStyle(document.documentElement).fontSize)
+                    );
+                }
+                if (value.endsWith('em')) {
+                    return parseFloat(value) * parseFloat(getComputedStyle(this.$refs.el).fontSize);
+                }
+            }
+
+            return value;
+        },
+        detectAutoValues() {
+            if (!this.$refs.el) return;
+
+            const cs = getComputedStyle(this.$refs.el);
+
+            // auto radius detection
+            if (this.radius === 'auto') {
+                const radiusTopLeft = cs.getPropertyValue('border-top-left-radius') || '0';
+                const radiusTopRight = cs.getPropertyValue('border-top-right-radius') || '0';
+                const radiusBottomRight = cs.getPropertyValue('border-bottom-right-radius') || '0';
+                const radiusBottomLeft = cs.getPropertyValue('border-bottom-left-radius') || '0';
+
+                this.computedRadius = [
+                    radiusTopLeft,
+                    radiusTopRight,
+                    radiusBottomRight,
+                    radiusBottomLeft,
+                ].map(r => this.parseCssDimension(r));
+            }
+
+            // auto border width detection
+            if (this.borderWidth === 'auto') {
+                // try border-width first, fallback to border-top-width
+                let borderWidth = cs.getPropertyValue('border-width') || '0';
+                if (borderWidth === '0' || borderWidth === '0px') {
+                    borderWidth = cs.getPropertyValue('border-top-width') || '0';
+                }
+                this.computedBorderWidth = this.parseCssDimension(borderWidth);
+            } else {
+                this.computedBorderWidth = parseFloat(this.borderWidth) || 0;
+            }
+
+            // auto border color detection
+            if (this.borderColor === 'auto') {
+                this.computedBorderColor = cs.getPropertyValue('border-color') || 'transparent';
+            } else {
+                this.computedBorderColor = this.borderColor;
+            }
+
+            // flag that we've detected styles, now we can apply overrides
+            this.autoStylesDetected = true;
+        },
+        updateDimensions() {
+            if (!this.$refs.el) return;
+
+            const rect = this.$refs.el.getBoundingClientRect();
+            this.dimensions.width = rect.width;
+            this.dimensions.height = rect.height;
+        },
+        setupResizeObserver() {
+            if (!this.$refs.el) return;
+
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.dimensions.width = entry.contentRect.width;
+                    this.dimensions.height = entry.contentRect.height;
+                }
+            });
+
+            this.resizeObserver.observe(this.$refs.el);
+        },
+    },
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+// @use '@/styles/include.scss' as *;
+@use '../styles/px.scss' as *;
+</style> -->

package/components/PxDatePicker.vue

@@ -190,7 +190,7 @@ export default {
     $popup: get(
         'controls.popup',
         (
-            background-color: color(page-bg),
+            background-color: site-var(page-bg),
             border-radius: get('controls.base.border-radius'),
             box-shadow: shadow(15),
             font-size: get('controls.base.font-size'),

package/components/PxMenu.vue

@@ -198,8 +198,8 @@ export {
 
 .px-menu {
     font-family: get('font-family');
-    background-color: color(page-bg);
-    color: color(page-fg);
+    background-color: site-var(page-bg);
+    color: site-var(page-fg);
     border-radius: get('controls.border-radius');
     overflow: hidden;
     display: flex;

package/components/PxScrubber.vue

@@ -121,15 +121,15 @@ function mouseMove(e) {
 <style lang="scss">
 @use '../styles/px.scss' as *;
 
-.px-scrubber {
-    @at-root :root {
-        --px-scrubber-height: 4px;
-        --px-scrubber-bg: #{clr(accent, $alpha: 0.1)};
-        --px-scrubber-padding: 1em 0;
-        --px-scrubber-progress-bg: #{clr(accent, 1)};
-        --px-scrubber-preview-bg: #{clr(accent, $alpha: 0.33)};
-    }
+@at-root :root {
+    --px-scrubber-height: 4px;
+    --px-scrubber-bg: #{clr(accent, $alpha: 0.1)};
+    --px-scrubber-padding: 1em 0;
+    --px-scrubber-progress-bg: #{clr(accent, 1)};
+    --px-scrubber-preview-bg: #{clr(accent, $alpha: 0.33)};
+}
 
+.px-scrubber {
     width: 100%;
     padding: var(--px-scrubber-padding);
     cursor: pointer;

package/composables/loadGsap.js

@@ -0,0 +1,60 @@
+// composables/loadGsap.js
+
+/**
+ * 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.
+ */
+
+let gsapPromise = null;
+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 });
+ */
+export const loadGsap = async () => {
+    if (!gsapPromise) {
+        gsapPromise = import('gsap').then(module => module.gsap);
+    }
+    return gsapPromise;
+};
+
+/**
+ * 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: {
+ *     trigger: '.element',
+ *     start: 'top center'
+ *   }
+ * });
+ */
+export const loadScrollTrigger = async () => {
+    if (!scrollTriggerPromise) {
+        scrollTriggerPromise = (async () => {
+            const [gsap, { ScrollTrigger }] = await Promise.all([loadGsap(), import('gsap/ScrollTrigger')]);
+            gsap.registerPlugin(ScrollTrigger);
+            return { gsap, ScrollTrigger };
+        })();
+    }
+    return scrollTriggerPromise;
+};

package/composables/loadLenis.js

@@ -0,0 +1,82 @@
+// composables/loadLenis.js
+
+/**
+ * Lazy loading utilities for Lenis smooth scrolling
+ * 
+ * These functions provide race-condition-safe loading and initialization of Lenis.
+ * The instance is shared across all components for consistent scroll behavior.
+ */
+
+let lenisPromise = null;
+let lenisInstancePromise = null;
+
+/**
+ * Loads the Lenis class lazily
+ * 
+ * @returns {Promise} Promise that resolves to the Lenis constructor
+ * 
+ * @example
+ * // Direct usage (not recommended - use useLenis composable instead)
+ * import { loadLenis } from '@thinkpixellab-public/px-vue/composables/loadLenis';
+ * 
+ * const Lenis = await loadLenis();
+ * const customLenis = new Lenis({
+ *   duration: 2,
+ *   smoothWheel: true
+ * });
+ */
+export const loadLenis = async () => {
+    if (!lenisPromise) {
+        lenisPromise = import('lenis').then(module => module.default);
+    }
+    return lenisPromise;
+};
+
+/**
+ * Loads a shared Lenis instance with default configuration
+ * 
+ * Returns the same instance across all calls for consistent scroll behavior.
+ * Starts with autoRaf enabled - useScrollAnimation will take over RAF control when needed.
+ * 
+ * @returns {Promise} Promise that resolves to the shared Lenis instance
+ * 
+ * @example
+ * // Direct usage (not recommended - use useLenis composable instead)
+ * import { loadLenisInstance } from '@thinkpixellab-public/px-vue/composables/loadLenis';
+ * 
+ * const lenis = await loadLenisInstance();
+ * 
+ * // smooth scroll to element
+ * lenis.scrollTo('#section-2', { duration: 1.5 });
+ * 
+ * // listen to scroll events
+ * lenis.on('scroll', (e) => {
+ *   console.log('Scroll position:', e.scroll);
+ * });
+ * 
+ * @example
+ * // Configuration details
+ * // The shared instance is created with:
+ * // {
+ * //   smoothWheel: false,     // disabled for better performance
+ * //   smoothTouch: false,     // disabled for mobile compatibility  
+ * //   autoRaf: true          // auto RAF until ScrollTrigger takes over
+ * // }
+ */
+export const loadLenisInstance = async () => {
+    if (!lenisInstancePromise) {
+        lenisInstancePromise = (async () => {
+            const Lenis = await loadLenis();
+
+            const lenisInstance = new Lenis({
+                smoothWheel: false,
+                smoothTouch: false,
+                autoRaf: true,
+            });
+
+            return lenisInstance;
+        })();
+    }
+
+    return lenisInstancePromise;
+};