@thinkpixellab-public/px-vue 4.1.6 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.6",
+    "version": "4.1.7",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"

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.
  */