@thinkpixellab-public/px-vue 4.1.23 → 4.1.24

package/composables/useCornerSmoothing.js

@@ -0,0 +1,264 @@
+/**
+ * useCornerSmoothing()
+ *
+ * A Vue 3 composable for creating smooth, squircle-like corners using CSS clip-path.
+ * Based on Figma's corner smoothing approach.
+ *
+ * Usage:
+ * ```vue
+ * <script>
+ * import { ref } from 'vue'
+ * import { useCornerSmoothing } from '@thinkpixellab-public/px-vue/composables/useCornerSmoothing'
+ *
+ * export default {
+ *   setup() {
+ *     const myElement = ref(null)
+ *     const { clipPath } = useCornerSmoothing(myElement, {
+ *       radius: 16,
+ *       smoothing: 0.8
+ *     })
+ *
+ *     return {
+ *       myElement,
+ *       clipPath // already reactive (computed)
+ *     }
+ *   }
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div
+ *     ref="myElement"
+ *     :style="{ clipPath }"
+ *   >
+ *     Content with smooth corners
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @param {element} elementRef Vue ref to the target element
+ * @param {number|Array|string} options.radius number, array [tl,tr,br,bl], or percentage string
+ * @param {number} options.smoothing smoothing amount 0-1 (default: 0.8)
+ * @param {number} options.borderWidth border width to account for (default: 0)
+ * @param {number} options.minRadius min radius in px (to constrain percentages)
+ * @param {number} options.maxRadius max radius in px (to constrain percentages)
+ * @param {boolean} options.autoApply Auto-apply clip-path to element style
+ * @param {boolean} options.preserveSmoothing Maintain smoothing at larger radii (See figma-squircle docs)
+ */
+
+import { computed, onMounted, onUnmounted, nextTick, reactive, watch } from 'vue';
+import { getSvgPath } from 'figma-squircle';
+
+function useCornerSmoothing(elementRef, options = {}) {
+    const dimensions = reactive({ width: 0, height: 0 });
+
+    let resizeObserver = null;
+
+    const config = reactive({
+        radius: 8,
+        smoothing: 0.8,
+        borderWidth: 0,
+        minRadius: 0,
+        maxRadius: Infinity,
+        autoApply: false,
+        preserveSmoothing: true,
+        ...options,
+    });
+
+    /**
+     * parse percentage string to number
+     */
+    function parsePercentage(value, reference) {
+        if (typeof value === 'string' && value.endsWith('%')) {
+            const percent = parseFloat(value) / 100;
+            return reference * percent;
+        }
+        return parseFloat(value) || 0;
+    }
+
+    /**
+     * expand radius array using css border-radius rules
+     */
+    function expandRadiusArray(radius) {
+        if (!Array.isArray(radius)) {
+            return [radius, radius, radius, radius];
+        }
+
+        const [tl, tr = tl, br = tl, bl = tr] = radius;
+        return [tl, tr, br, bl];
+    }
+
+    /**
+     * calculate corner radii with percentage support and clamping
+     */
+    function calculateCornerRadii(radius, width, height, minRadius, maxRadius) {
+        const reference = Math.max(width, height);
+        const expanded = expandRadiusArray(radius);
+
+        return expanded.map(r => {
+            const parsed = parsePercentage(r, reference);
+            return Math.max(minRadius, Math.min(maxRadius, parsed));
+        });
+    }
+
+    /**
+     * generates squircle path using figma-squircle library
+     */
+    function generateSquirclePath(width, height, radii, smoothing, preserveSmoothing) {
+        if (width <= 0 || height <= 0) return '';
+
+        const [tl, tr, br, bl] = radii;
+
+        // check if all corners are the same (uniform)
+        const isUniform = tl === tr && tr === br && br === bl;
+
+        if (isUniform) {
+            // use simple API for uniform corners
+            return getSvgPath({
+                width,
+                height,
+                cornerRadius: tl,
+                cornerSmoothing: smoothing,
+                preserveSmoothing,
+            });
+        } else {
+            // use individual corner API for different corners
+            return getSvgPath({
+                width,
+                height,
+                cornerRadius: Math.max(tl, tr, br, bl), // fallback base radius
+                cornerSmoothing: smoothing,
+                preserveSmoothing,
+                topLeftCornerRadius: tl,
+                topRightCornerRadius: tr,
+                bottomRightCornerRadius: br,
+                bottomLeftCornerRadius: bl,
+            });
+        }
+    }
+
+    /**
+     * Computed clip-path value
+     */
+    const clipPath = computed(() => {
+        if (dimensions.width <= 0 || dimensions.height <= 0) return null;
+
+        const adjustedWidth = Math.max(0, dimensions.width - config.borderWidth * 2);
+        const adjustedHeight = Math.max(0, dimensions.height - config.borderWidth * 2);
+
+        if (adjustedWidth <= 0 || adjustedHeight <= 0) return null;
+
+        // calculate corner radii with percentage support and clamping
+        const radii = calculateCornerRadii(
+            config.radius,
+            adjustedWidth,
+            adjustedHeight,
+            config.minRadius,
+            config.maxRadius,
+        );
+
+        const path = generateSquirclePath(
+            adjustedWidth,
+            adjustedHeight,
+            radii,
+            config.smoothing,
+            config.preserveSmoothing,
+        );
+
+        if (!path) return null;
+
+        // offset path if border width is specified
+        const offsetX = config.borderWidth;
+        const offsetY = config.borderWidth;
+
+        if (offsetX > 0 || offsetY > 0) {
+            // transform path to account for border offset
+            const translatedPath = path
+                .replace(/([ML])\s*([0-9.]+)\s+([0-9.]+)/g, (_, command, x, y) => {
+                    return `${command} ${parseFloat(x) + offsetX} ${parseFloat(y) + offsetY}`;
+                })
+                .replace(
+                    /([C])\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)/g,
+                    (_, command, x1, y1, x2, y2, x3, y3) => {
+                        return `${command} ${parseFloat(x1) + offsetX} ${parseFloat(y1) + offsetY} ${parseFloat(x2) + offsetX} ${parseFloat(y2) + offsetY} ${parseFloat(x3) + offsetX} ${parseFloat(y3) + offsetY}`;
+                    },
+                );
+            return `path('${translatedPath}')`;
+        }
+
+        return `path('${path}')`;
+    });
+
+    /**
+     * Update element dimensions
+     */
+    function updateDimensions() {
+        if (!elementRef.value) return;
+
+        const rect = elementRef.value.getBoundingClientRect();
+        dimensions.width = rect.width;
+        dimensions.height = rect.height;
+    }
+
+    /**
+     * Apply clip-path directly to element style
+     */
+    function applyClipPath() {
+        if (!elementRef.value || !config.autoApply) return;
+
+        if (clipPath.value) {
+            elementRef.value.style.clipPath = clipPath.value;
+        } else {
+            elementRef.value.style.clipPath = '';
+        }
+    }
+
+    // watch for auto-apply changes
+    watch([clipPath, () => config.autoApply], applyClipPath, { immediate: true });
+
+    onMounted(() => {
+        nextTick(() => {
+            if (!elementRef.value) return;
+
+            // initial dimension update
+            updateDimensions();
+
+            // set up resize observer
+            resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    dimensions.width = entry.contentRect.width;
+                    dimensions.height = entry.contentRect.height;
+                }
+            });
+
+            resizeObserver.observe(elementRef.value);
+        });
+    });
+
+    onUnmounted(() => {
+        resizeObserver?.disconnect();
+    });
+
+    /**
+     * Update configuration reactively
+     */
+    function updateConfig(newConfig) {
+        Object.assign(config, newConfig);
+    }
+
+    /**
+     * Manual update trigger
+     */
+    function forceUpdate() {
+        updateDimensions();
+    }
+
+    return {
+        clipPath,
+        updateConfig,
+        forceUpdate,
+    };
+}
+
+export { useCornerSmoothing };
+export { useCornerSmoothing as default };

package/composables/useVariants.js

@@ -1,5 +1,57 @@
+/**
+ * useVariants()
+ *
+ * Handles component variants as a replacement for PxBaseVariants. Provides reactive variant
+ * processing with support for defaults and base variants.
+ *
+ * Usage with Options API setup():
+ *
+ * ```vue
+ * <script>
+ * import useVariants from '@thinkpixellab-public/px-vue/composables/useVariants'
+ * import { inject, computed } from 'vue'
+ *
+ * export default {
+ *   props: {
+ *     variant: { type: String, default: null },
+ *   },
+ *   setup(props) {
+ *     const fallback = inject('defaultVariant', null)
+ *
+ *     const { variantsMap, isVariant, variantsToValue } = useVariants(
+ *       props.variant,    // main variant prop
+ *       fallback,         // default/fallback variant
+ *       'base-class'      // base variant (optional)
+ *     )
+ *
+ *     const isSpecial = computed(() => isVariant('special'))
+ *     const buttonColor = variantsToValue({ primary: 'blue', secondary: 'gray' }, 'default')
+ *
+ *     return {
+ *       variantsMap,  // for :class="bem(variantsMap)"
+ *       isSpecial,
+ *       buttonColor,
+ *     }
+ *   }
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div :class="bem(variantsMap)">
+ *     Content with variants applied
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @param {string|Array|Ref} variant Main variant value (reactive)
+ * @param {string|Array|Ref} variantDefault Default variant when main is empty (reactive)
+ * @param {string|Array|Ref} variantBase Base variant always included (reactive)
+ * @returns {Object} { variants, variantArray, variantString, variantsMap, isVariant,
+ * variantsToValue }
+ */
+
 import { computed, toValue } from 'vue';
-import variants from '../utils/variants.js';
+import variantsUtils from '../utils/variants.js';
 import { arrayHasCommonItem, ensureArray } from '../utils/utils.js';
 
 export default function useVariants(variant, variantDefault, variantBase) {
@@ -11,12 +63,12 @@ export default function useVariants(variant, variantDefault, variantBase) {
      * Returns the variant as an array. This is also the primary source of state for the variant and
      * should be used by all other methods, etc.
      */
-    const variants = computed(() => {
-        const variantArray = variants.toVariantsArray(toValue(variant));
-        const baseArray = variants.toVariantsArray(toValue(variantBase));
-        const defaultArray = variants.toVariantsArray(toValue(variantDefault));
+    const variantArray = computed(() => {
+        const variantArray = variantsUtils.toVariantsArray(toValue(variant));
+        const baseArray = variantsUtils.toVariantsArray(toValue(variantBase));
+        const defaultArray = variantsUtils.toVariantsArray(toValue(variantDefault));
 
-        return this.toVariantsArray([
+        return variantsUtils.toVariantsArray([
             ...baseArray,
             ...(variantArray.length ? variantArray : defaultArray),
         ]);
@@ -26,7 +78,7 @@ export default function useVariants(variant, variantDefault, variantBase) {
      * Returns the variant as a string
      */
     const variantString = computed(() => {
-        return this.variants.join(' ');
+        return variantArray.value.join(' ');
     });
 
     /**
@@ -34,9 +86,12 @@ export default function useVariants(variant, variantDefault, variantBase) {
      * methods, etc.)
      */
     const variantsMap = computed(() => {
-        return this.toVariantsMap(this.variants);
+        return variantsUtils.toVariantsMap(variantArray.value);
     });
 
+    // alias for backwards compatibility with PxBaseVariants
+    const variants = variantArray;
+
     // -------------------------------------------------------------------------------
     // Methods
     // -------------------------------------------------------------------------------
@@ -46,7 +101,7 @@ export default function useVariants(variant, variantDefault, variantBase) {
      */
     const isVariant = variantStringOrArray => {
         const array = ensureArray(variantStringOrArray);
-        return arrayHasCommonItem(this.variants, array);
+        return arrayHasCommonItem(variantArray.value, array);
     };
 
     /**
@@ -56,12 +111,12 @@ export default function useVariants(variant, variantDefault, variantBase) {
      */
     const variantsToValue = (valueMap, fallback) => {
         for (let key in valueMap) {
-            if (this.isVariant(key)) {
+            if (isVariant(key)) {
                 return valueMap[key];
             }
         }
         return fallback;
     };
 
-    return { variants, variantString, variantsMap, isVariant, variantsToValue };
+    return { variants, variantArray, variantString, variantsMap, isVariant, variantsToValue };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.23",
+    "version": "4.1.24",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -28,6 +28,7 @@
         "body-scroll-lock": "^3.1.5",
         "chrono-node": "^2.7.8",
         "dateformat": "^5.0.3",
+        "figma-squircle": "^1.1.0",
         "gsap": "^3.12.7",
         "highlight.js": "^11.11.1",
         "mitt": "^3.0.1",