@pequity/squirrel 5.5.0 → 6.0.1

package/dist/es/chunks/p-icon.js

@@ -12,7 +12,7 @@ import { P_ICON_ALIASES } from "../p-icon.js";
 * Licensed under MIT.
 *
 * @license MIT
-* @version 2.1.0
+* @version 2.2.0
 */
 const defaultIconDimensions = Object.freeze(
   {
@@ -162,7 +162,9 @@ const validateIconName = (icon, allowSimpleName) => {
   if (!icon) {
     return false;
   }
-  return !!((icon.provider === "" || icon.provider.match(matchIconName)) && (allowSimpleName && icon.prefix === "" || icon.prefix.match(matchIconName)) && icon.name.match(matchIconName));
+  return !!// Check prefix: cannot be empty, unless allowSimpleName is enabled
+  // Check name: cannot be empty
+  ((allowSimpleName && icon.prefix === "" || !!icon.prefix) && !!icon.name);
 };
 function mergeIconTransformations(obj1, obj2) {
   const result = {};
@@ -277,10 +279,15 @@ function quicklyValidateIconSet(obj) {
   const icons = data.icons;
   for (const name in icons) {
     const icon = icons[name];
-    if (!name.match(matchIconName) || typeof icon.body !== "string" || !checkOptionalProps(
-      icon,
-      defaultExtendedIconProps
-    )) {
+    if (
+      // Name cannot be empty
+      !name || // Must have body
+      typeof icon.body !== "string" || // Check other props
+      !checkOptionalProps(
+        icon,
+        defaultExtendedIconProps
+      )
+    ) {
       return null;
     }
   }
@@ -288,10 +295,15 @@ function quicklyValidateIconSet(obj) {
   for (const name in aliases) {
     const icon = aliases[name];
     const parent = icon.parent;
-    if (!name.match(matchIconName) || typeof parent !== "string" || !icons[parent] && !aliases[parent] || !checkOptionalProps(
-      icon,
-      defaultExtendedIconProps
-    )) {
+    if (
+      // Name cannot be empty
+      !name || // Parent must be set and point to existing icon
+      typeof parent !== "string" || !icons[parent] && !aliases[parent] || // Check other props
+      !checkOptionalProps(
+        icon,
+        defaultExtendedIconProps
+      )
+    ) {
       return null;
     }
   }
@@ -369,7 +381,12 @@ function addIcon$1(name, data) {
     return false;
   }
   const storage2 = getStorage(icon.provider, icon.prefix);
-  return addIconToStorage(storage2, icon.name, data);
+  if (data) {
+    return addIconToStorage(storage2, icon.name, data);
+  } else {
+    storage2.missing.add(icon.name);
+    return true;
+  }
 }
 function addCollection$1(data, provider) {
   if (typeof data !== "object") {
@@ -383,7 +400,7 @@ function addCollection$1(data, provider) {
     if (quicklyValidateIconSet(data)) {
       data.prefix = "";
       parseIconSet(data, (name, icon) => {
-        if (icon && addIcon$1(name, icon)) {
+        if (addIcon$1(name, icon)) {
           added = true;
         }
       });
@@ -409,7 +426,7 @@ function getIcon$1(name) {
   return result ? {
     ...defaultIconProps,
     ...result
-  } : null;
+  } : result;
 }
 function sortIcons(icons) {
   const result = {
@@ -1069,6 +1086,57 @@ function loadedNewIcons(storage2) {
     });
   }
 }
+function checkIconNamesForAPI(icons) {
+  const valid = [];
+  const invalid = [];
+  icons.forEach((name) => {
+    (name.match(matchIconName) ? valid : invalid).push(name);
+  });
+  return {
+    valid,
+    invalid
+  };
+}
+function parseLoaderResponse(storage2, icons, data, isAPIResponse) {
+  function checkMissing() {
+    const pending = storage2.pendingIcons;
+    icons.forEach((name) => {
+      if (pending) {
+        pending.delete(name);
+      }
+      if (!storage2.icons[name]) {
+        storage2.missing.add(name);
+      }
+    });
+  }
+  if (data && typeof data === "object") {
+    try {
+      const parsed = addIconSet(storage2, data);
+      if (!parsed.length) {
+        checkMissing();
+        return;
+      }
+      if (isAPIResponse) {
+        storeInBrowserStorage(storage2, data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  checkMissing();
+  loadedNewIcons(storage2);
+}
+function parsePossiblyAsyncResponse(response, callback) {
+  if (response instanceof Promise) {
+    response.then((data) => {
+      callback(data);
+    }).catch(() => {
+      callback(null);
+    });
+  } else {
+    callback(response);
+  }
+}
 function loadNewIcons(storage2, icons) {
   if (!storage2.iconsToLoad) {
     storage2.iconsToLoad = icons;
@@ -1082,38 +1150,50 @@ function loadNewIcons(storage2, icons) {
       const { provider, prefix } = storage2;
       const icons2 = storage2.iconsToLoad;
       delete storage2.iconsToLoad;
-      let api;
-      if (!icons2 || !(api = getAPIModule(provider))) {
+      if (!icons2 || !icons2.length) {
+        return;
+      }
+      const customIconLoader = storage2.loadIcon;
+      if (storage2.loadIcons && (icons2.length > 1 || !customIconLoader)) {
+        parsePossiblyAsyncResponse(
+          storage2.loadIcons(icons2, prefix, provider),
+          (data) => {
+            parseLoaderResponse(storage2, icons2, data, false);
+          }
+        );
         return;
       }
-      const params = api.prepare(provider, prefix, icons2);
+      if (customIconLoader) {
+        icons2.forEach((name) => {
+          const response = customIconLoader(name, prefix, provider);
+          parsePossiblyAsyncResponse(response, (data) => {
+            const iconSet = data ? {
+              prefix,
+              icons: {
+                [name]: data
+              }
+            } : null;
+            parseLoaderResponse(storage2, [name], iconSet, false);
+          });
+        });
+        return;
+      }
+      const { valid, invalid } = checkIconNamesForAPI(icons2);
+      if (invalid.length) {
+        parseLoaderResponse(storage2, invalid, null, false);
+      }
+      if (!valid.length) {
+        return;
+      }
+      const api = prefix.match(matchIconName) ? getAPIModule(provider) : null;
+      if (!api) {
+        parseLoaderResponse(storage2, valid, null, false);
+        return;
+      }
+      const params = api.prepare(provider, prefix, valid);
       params.forEach((item) => {
         sendAPIQuery(provider, item, (data) => {
-          if (typeof data !== "object") {
-            item.icons.forEach((name) => {
-              storage2.missing.add(name);
-            });
-          } else {
-            try {
-              const parsed = addIconSet(
-                storage2,
-                data
-              );
-              if (!parsed.length) {
-                return;
-              }
-              const pending = storage2.pendingIcons;
-              if (pending) {
-                parsed.forEach((name) => {
-                  pending.delete(name);
-                });
-              }
-              storeInBrowserStorage(storage2, data);
-            } catch (err) {
-              console.error(err);
-            }
-          }
-          loadedNewIcons(storage2);
+          parseLoaderResponse(storage2, item.icons, data, true);
         });
       });
     });
@@ -1166,9 +1246,9 @@ const loadIcons$1 = (icons, callback) => {
     }
   });
   sources.forEach((storage2) => {
-    const { provider, prefix } = storage2;
-    if (newIcons[provider][prefix].length) {
-      loadNewIcons(storage2, newIcons[provider][prefix]);
+    const list = newIcons[storage2.provider][storage2.prefix];
+    if (list.length) {
+      loadNewIcons(storage2, list);
     }
   });
   return callback ? storeCallback(callback, sortedIcons, sources) : emptyCallback;
@@ -1207,12 +1287,31 @@ function testIconObject(value) {
   }
 }
 function parseIconValue(value, onload) {
-  const name = typeof value === "string" ? stringToIcon(value, true, true) : null;
-  if (!name) {
+  if (typeof value === "object") {
     const data2 = testIconObject(value);
     return {
-      value,
-      data: data2
+      data: data2,
+      value
+    };
+  }
+  if (typeof value !== "string") {
+    return {
+      value
+    };
+  }
+  if (value.includes("{")) {
+    const data2 = testIconObject(value);
+    if (data2) {
+      return {
+        data: data2,
+        value
+      };
+    }
+  }
+  const name = stringToIcon(value, true, true);
+  if (!name) {
+    return {
+      value
     };
   }
   const data = getIconData(name);
@@ -1238,6 +1337,7 @@ try {
 }
 function getRenderMode(body, mode) {
   switch (mode) {
+    // Force mode
     case "svg":
     case "bg":
     case "mask":
@@ -1577,6 +1677,12 @@ const fetchAPIModule = {
   prepare,
   send
 };
+function setCustomIconsLoader$1(loader, prefix, provider) {
+  getStorage(provider || "", prefix).loadIcons = loader;
+}
+function setCustomIconLoader$1(loader, prefix, provider) {
+  getStorage(provider || "", prefix).loadIcon = loader;
+}
 function toggleBrowserCache(storage2, value) {
   switch (storage2) {
     case "local":
@@ -1602,7 +1708,7 @@ function updateStyle(parent, inline) {
     styleNode.setAttribute(nodeAttr, nodeAttr);
     parent.appendChild(styleNode);
   }
-  styleNode.textContent = ":host{display:inline-block;vertical-align:" + (inline ? "-0.125em" : "0") + "}span,svg{display:block}" + customStyle;
+  styleNode.textContent = ":host{display:inline-block;vertical-align:" + (inline ? "-0.125em" : "0") + "}span,svg{display:block;margin:auto}" + customStyle;
 }
 function exportFunctions() {
   setAPIModule("", fetchAPIModule);
@@ -1679,6 +1785,8 @@ function exportFunctions() {
     loadIcons: loadIcons$1,
     loadIcon: loadIcon$1,
     addAPIProvider: addAPIProvider$1,
+    setCustomIconLoader: setCustomIconLoader$1,
+    setCustomIconsLoader: setCustomIconsLoader$1,
     appendCustomStyle,
     _api
   };

package/dist/es/chunks/p-link.js

@@ -13,6 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     activeClass: {},
     exactActiveClass: {},
     ariaCurrentValue: {},
+    viewTransition: { type: Boolean },
     to: {},
     replace: { type: Boolean }
   },

package/dist/es/config.js

@@ -1,4 +1,4 @@
-const config = {
+const squirrelTailwindConfig = {
   content: ["./index.html", "./squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}", "./src/**/*.{vue,js,ts,jsx,tsx,mdx}"],
   theme: {
     colors: {
@@ -101,5 +101,5 @@ const config = {
   }
 };
 export {
-  config
+  squirrelTailwindConfig
 };

package/dist/es/index.js

@@ -54,7 +54,7 @@ import { default as default19 } from "./p-table-td.js";
 import { _ as _14 } from "./chunks/p-tabs.js";
 import { default as default20 } from "./p-textarea.js";
 import { default as default21 } from "./p-toggle.js";
-import { config } from "./config.js";
+import { squirrelTailwindConfig } from "./config.js";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
 import { getNextActiveElement, isElement, isVisible } from "./dom.js";
 import { default as default22 } from "./inputClassesMixin.js";
@@ -1016,7 +1016,6 @@ export {
   SPACING_SUFFIX,
   TEXTAREA_BASE,
   colsInjectionKey,
-  config,
   createPagingRange,
   getColor,
   getColorDeep,
@@ -1032,6 +1031,7 @@ export {
   sanitizeUrl,
   setupListKeyboardNavigation,
   splitStringForHighlight,
+  squirrelTailwindConfig,
   toNumberOrNull,
   toString,
   useInputClasses,

package/dist/es/p-dropdown.js

@@ -1,9 +1,20 @@
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
+import { Dropdown } from "floating-vue";
 import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const ESCAPE_KEY = "Escape";
+const nextFrame = () => {
+  return new Promise(
+    (resolve) => requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    })
+  );
+};
 const _sfc_main = defineComponent({
   name: "PDropdown",
+  components: {
+    Dropdown
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -30,49 +41,24 @@ const _sfc_main = defineComponent({
       default: () => ({
         display: "inline-block"
       })
-    },
-    /**
-     * Custom reference element that is used to position the popper.
-     * Can be changed at runtime to create a dynamically positioned dropdown.
-     */
-    reference: {
-      type: HTMLElement,
-      default: null
     }
   },
   data() {
     return {
       defaultAttrs: {
         triggers: ["click"],
-        "auto-hide": true,
+        autoHide: true,
         theme: "p-dropdown-theme",
-        "popper-class": "dropdown",
+        popperClass: "dropdown",
         placement: "bottom-start",
         distance: 4,
         delay: 0,
         handleResize: true
       },
-      navigationSvc: null
+      navigationSvc: null,
+      prevReference: null
     };
   },
-  watch: {
-    reference: {
-      async handler(nV, oV) {
-        if (nV && oV !== nV) {
-          const popper = this.$refs.vPopper.$refs.popper;
-          if (popper) {
-            popper.$_detachPopperNode();
-            if (popper.shown) {
-              popper.hide({ skipDelay: true });
-            }
-            if (this.reference) {
-              popper.$_referenceNode = this.reference;
-            }
-          }
-        }
-      }
-    }
-  },
   mounted() {
     Object.assign(this.$refs.vPopper.$refs.popper.$el.style, this.triggerStyle);
   },
@@ -99,12 +85,32 @@ const _sfc_main = defineComponent({
       var _a;
       (_a = this.navigationSvc) == null ? void 0 : _a.destroy();
       document.removeEventListener("keydown", this.popoverEscKeydown);
+    },
+    async updateReference(newReference) {
+      if (!newReference) {
+        throw Error("Reference element is required");
+      }
+      const popper = this.$refs.vPopper.$refs.popper;
+      if (popper) {
+        popper.$_detachPopperNode();
+        if (popper.isShown) {
+          popper.$emit("update:shown", false);
+          if (newReference === this.prevReference) {
+            return;
+          }
+        }
+        await nextFrame();
+        popper.$_referenceNode = newReference;
+        this.prevReference = newReference;
+        await nextFrame();
+        popper.$emit("update:shown", true);
+      }
     }
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VDropdown = resolveComponent("VDropdown");
-  return openBlock(), createBlock(_component_VDropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
+  const _component_Dropdown = resolveComponent("Dropdown");
+  return openBlock(), createBlock(_component_Dropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
     onShow: _ctx.onShow,
     onHide: _ctx.destroy
   }), createSlots({ _: 2 }, [

package/dist/es/tailwind.js

@@ -1,8 +1,8 @@
 var _a;
-import { config as config$1 } from "./config.js";
+import { squirrelTailwindConfig } from "./config.js";
 import { get } from "lodash-es";
 import resolveConfig from "tailwindcss/resolveConfig";
-const config = resolveConfig(config$1);
+const config = resolveConfig(squirrelTailwindConfig);
 const theme = config.theme;
 const colors = theme == null ? void 0 : theme.colors;
 (_a = theme == null ? void 0 : theme.extend) == null ? void 0 : _a.colors;