@thinkpixellab-public/px-vue 4.1.5 → 4.1.7

package/bases/PxBaseSvg.vue

@@ -120,7 +120,7 @@ export default {
             }
 
             // fallback is 1:1
-            return 16 / 9;
+            return 1 / 1;
         },
         calcHeight() {
             if (!this.size && this.svgHeight) {

package/components/PxColorPaletteButton.vue

@@ -36,6 +36,7 @@ export default {
 </script>
 
 <style lang="scss">
+@use 'sass:string';
 @use '../styles/px.scss' as *;
 
 @function color-wheel-gradient($count, $blend: true, $sat: 100%, $light: 50%) {
@@ -53,7 +54,7 @@ export default {
         }
     }
 
-    @return unquote($grad);
+    @return string.unquote($grad);
 }
 
 .px-color-palette-button {

package/components/PxFit.vue

@@ -252,7 +252,9 @@ export default {
             grid-area: 1 / 1;
         }
 
-        @include transition(opacity, $dur: 100ms);
+        & {
+            @include transition(opacity, $dur: 100ms);
+        }
     }
 
     &--fitting & {

package/components/PxIcon.vue

@@ -30,41 +30,29 @@ PxVue contains the full set of [feather icons](https://feathericons.com/) and a
 those available by name within the application. See the plugin reference below.
 
 ```js
-// px-vue feather icons helper
+
+// icons.js (add to plugins folder)
+
+import { defineNuxtPlugin } from '#app';
+import getIcons from '@thinkpixellab-public/px-vue/utils/getIcons.js';
 import getFeatherIcons from '@thinkpixellab-public/px-vue/utils/getFeatherIcons.js';
 
 export default defineNuxtPlugin(nuxtApp => {
-    const vueApp = nuxtApp.vueApp;
-
-    // search for icons in the @/assets/feather folder
-    const icons = Object.values(
-        import.meta.globEager('@thinkpixellab-public/px-vue/assets/feather/*.svg')
-    ).reduce((obj, value) => {
-        const url = value.default;
-        const name = url.match(/([^\/]+)(?=\.\w+$)/)[0];
-        obj[name] = url;
-        return obj;
-    }, {});
-
-    vueApp.provide('PxIcon.icons', {
-        // local icons
-        ...icons,
-
-        // feather icons from px-vue
+    nuxtApp.vueApp?.provide('PxIcon.icons', {
+
+        // use getFeatherIcons to get a filtered map of px-vue feather icons
         ...getFeatherIcons([
-            'chevron-left',
-            'chevron-right',
-            'chevron-up',
-            'chevron-down',
             'arrow-left',
             'arrow-right',
-            'arrow-up',
-            'arrow-down',
-            'settings',
             'folder',
         ]),
+
+        // use getIcons to get a map of custom icons
+        ...getIcons(import.meta.glob('~/assets/icons/*.svg', { eager: true })),
     });
 });
+
+
 ```
  */
 

package/components/PxIconButton.vue

@@ -127,7 +127,7 @@ export default {
 .px-icon-button {
     // VARIANTS
 
-    @include control-reset();
+    @include controls.control-reset();
 
     &--default {
         @include controls.button-icon(

package/components/PxResizer.vue

@@ -141,6 +141,7 @@ export default {
 
 <style lang="scss">
 @use '../styles/px.scss' as *;
+@use 'sass:color';
 
 .px-resizer {
     position: relative;
@@ -173,7 +174,7 @@ export default {
     &__resize-y {
         color: accent();
         &:hover {
-            color: darken(accent(), 10%);
+            color: color.adjust(accent(), $lightness: -10%);
         }
         &:active {
             opacity: 0.5;

package/components/PxToggleButton.vue

@@ -206,7 +206,9 @@ export default {
         @include button();
     }
 
-    gap: var(--px-toggle-button-gap);
+    & {
+        gap: var(--px-toggle-button-gap);
+    }
 
     &__icon,
     &__label {
@@ -256,17 +258,17 @@ export default {
 
     // default checked state
     &--checked.px-button--default:not(:disabled) {
-        background-color: color(select);
+        background-color: clr(select);
         box-shadow: none;
         &:hover {
-            background-color: color(select);
+            background-color: clr(select);
             box-shadow: none;
         }
     }
 
     // outline checked state
     &--checked.px-button--outline:not(:disabled) {
-        background-color: color(accent, 0.15);
+        background-color: clr(accent, 0.15);
     }
 
     &--icon & {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.5",
+    "version": "4.1.7",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -41,6 +41,7 @@
     "devDependencies": {
         "@babel/core": "^7.26.7",
         "@chromatic-com/storybook": "^3.2.4",
+        "@nuxt/kit": "^3.15.4",
         "@rushstack/eslint-patch": "^1.10.5",
         "@storybook/addon-essentials": "^8.5.3",
         "@storybook/addon-interactions": "^8.5.3",

package/test/utils.test.js

@@ -0,0 +1,46 @@
+import { objectToArray } from '../utils/utils.js';
+
+test('objectToArray (defaults with value type value)', () => {
+    expect(objectToArray({ one: 1, two: 2, three: 3 })).toEqual([
+        { key: 'one', value: 1 },
+        { key: 'two', value: 2 },
+        { key: 'three', value: 3 },
+    ]);
+});
+
+test('objectToArray (override naming params)', () => {
+    expect(objectToArray({ one: 1, two: 2, three: 3 }, 'id', 'number')).toEqual([
+        { id: 'one', number: 1 },
+        { id: 'two', number: 2 },
+        { id: 'three', number: 3 },
+    ]);
+});
+
+test('objectToArray (defaults with object type value)', () => {
+    expect(objectToArray({ one: { number: 1 }, two: { number: 2 }, three: { number: 3 } })).toEqual(
+        [
+            { key: 'one', value: { number: 1 } },
+            { key: 'two', value: { number: 2 } },
+            { key: 'three', value: { number: 3 } },
+        ],
+    );
+});
+
+test('objectToArray (expand objects)', () => {
+    expect(
+        objectToArray(
+            {
+                one: { number: 1, ordinal: 'first' },
+                two: { number: 2, ordinal: 'second' },
+                three: { number: 3, ordinal: 'third' },
+            },
+            undefined,
+            undefined,
+            true,
+        ),
+    ).toEqual([
+        { key: 'one', number: 1, ordinal: 'first' },
+        { key: 'two', number: 2, ordinal: 'second' },
+        { key: 'three', number: 3, ordinal: 'third' },
+    ]);
+});

package/utils/getFeatherIcons.js

@@ -1,25 +1,18 @@
+import getIcons from './getIcons.js';
+import { filterObjectByKeys } from './utils.js';
 /**
  * Returns an object enumerating feather icons that can be used with a PxIcons provide function to
  * make feather icons available. If the names array non-null is provided, only icons with those
  * names will be included.
  */
 
-const getFeatherIcons = names => {
-    const icons = Object.values(import.meta.globEager('../assets/feather/*.svg')).reduce(
-        (obj, value) => {
-            const url = value.default;
-            const name = url.match(/([^\/]+)(?=\.\w+$)/)[0];
+export default function getFeatherIcons(names) {
+    const importIcons = import.meta.glob('../assets/feather/*.svg', { eager: true });
+    const icons = getIcons(importIcons);
 
-            // filter if names is provided
-            if ((names && names.includes(name)) || !names) {
-                obj[name] = url;
-            }
-            return obj;
-        },
-        {}
-    );
-
-    return icons;
-};
-
-export default getFeatherIcons;
+    if (names && names.length) {
+        return filterObjectByKeys(icons, names);
+    } else {
+        return icons;
+    }
+}

package/utils/getIcons.js

@@ -0,0 +1,28 @@
+/**
+ * Processes a raw icon map (e.g. from import.meta.glob) and returns a formatted map.
+ *
+ * @param {object} iconsImport - The raw object returned by import.meta.glob.
+ * @returns {object} iconMap - An object mapping icon names to their corresponding modules.
+ *
+ * @example
+ * // In your file (for example, in nuxt.config.js or another module processed by Vite):
+ * // Use a literal glob pattern to ensure Vite can statically analyze the files.
+ *
+ * import { getIcons } from './iconsUtil.js';
+ * const importIcons = import.meta.glob('~/assets/icons/*.svg', { eager: true });
+ * const icons = getIcons(importIcons);
+ *
+ */
+
+export default function getIcons(iconsImport) {
+    const iconMap = Object.fromEntries(
+        Object.entries(iconsImport).map(([path, module]) => {
+            const parts = path.split('/');
+            const fileName = parts[parts.length - 1];
+            const iconName = fileName.replace('.svg', '');
+            return [iconName, module.default || module];
+        }),
+    );
+
+    return iconMap;
+}

package/utils/utils.js

@@ -204,11 +204,20 @@ export function arrayMoveItem(arr, fromIndex, toIndex) {
     arr.splice(toIndex, 0, arr.splice(fromIndex, 1)[0]);
 }
 
+export function objectToArray(object, keyName = 'key', valueName = 'value', expandObjects = false) {
+    return Object.keys(object).map(key => {
+        if (expandObjects && typeof object[key] === 'object') {
+            return { [keyName]: key, ...object[key] };
+        }
+        return { [keyName]: key, [valueName]: object[key] };
+    });
+}
+
 /**
- * Returns a version with only values that past the test defined in filterFunction.
+ * Returns a version of an object with only values that past the test defined in filterFunction.
  *
  * @param {object} obj
- * @param {functintion} filterFunction
+ * @param {function} filterFunction
  * @return {object}
  */
 export function filterObject(obj, filterFunction) {
@@ -220,6 +229,28 @@ export function filterObject(obj, filterFunction) {
         }, {});
 }
 
+/**
+ * Filters an object to only include keys that are present in the allowedKeys array.
+ *
+ * @param {Object} obj - The object to filter.
+ * @param {string[]} allowedKeys - An array of keys that should be retained in the result.
+ * @returns {Object} A new object containing only the key/value pairs for keys in allowedKeys.
+ *
+ * @example
+ * const data = { a: 1, b: 2, c: 3 };
+ * const result = filterObjectByKeys(data, ['a', 'c']);
+ * // result is { a: 1, c: 3 }
+ */
+
+export function filterObjectByKeys(obj, allowedKeys) {
+    return Object.keys(obj)
+        .filter(key => allowedKeys.includes(key))
+        .reduce((result, key) => {
+            result[key] = obj[key];
+            return result;
+        }, {});
+}
+
 /**
  * Returns an object representing the current query string parameters.
  */