@saasquatch/mint-components 1.6.2-2 → 1.7.0-1

package/dist/collection/components/sqm-router/Router.stories.js

@@ -1,144 +1,144 @@
-import { navigation } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/stencil-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-export default {
-  title: "Tests/Router",
-};
-const templates = `
-    <template path="/foo"><h1>foo</h1>
-    
-    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
-
-    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
-    </template>
-    <template path="/bar"><h2>bar</h2>
-    
-    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
-    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
-    </template>
-    <template path="/baz/bang"><h3>baz/bang</h3>
-    <pre>
-    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
-    ░░▀███░░░░▀██░░░░██▀░░░░██░░
-    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
-    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
-    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
-    ░░░░░░███░░░░▄███░░░░█▀░░░░░
-    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
-    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
-    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
-    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
-    </pre>
-    </template>
-    <template path="/refer/:page"><h3>/refer/:page</h3>
-    <pre>
-      refer/:page
-    </pre>
-    </template>
-`;
-const routes = `
-    <sqm-route path="/foo"><h1>foo</h1>
-    
-    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
-
-    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
-    </sqm-route>
-    <sqm-route path="/bar"><h2>bar</h2>
-    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
-    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
-    </sqm-route>
-    <sqm-route path="/baz/bang"><h3>baz/bang</h3>
-    <pre>
-    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
-    ░░▀███░░░░▀██░░░░██▀░░░░██░░
-    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
-    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
-    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
-    ░░░░░░███░░░░▄███░░░░█▀░░░░░
-    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
-    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
-    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
-    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
-    </pre>
-    </sqm-route>
-    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>
-    <pre>
-      refer/:page
-    </pre>
-    </sqm-route>
-`;
-export const TemplateNavigation = createHookStory(() => {
-  return (h("div", null,
-    h("button", { onClick: () => navigation.push("/") }, "/"),
-    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
-    h("button", { onClick: () => navigation.push("/bar") }, "/bar"),
-    h("button", { onClick: () => navigation.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => navigation.push("/refer") }, "/refer"),
-    h("button", { onClick: () => navigation.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => navigation.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => navigation.back() }, "Back"),
-    h("button", { onClick: () => navigation.forward() }, "Forward"),
-    h("hr", null),
-    h("sqm-router", { innerHTML: templates })));
-});
-export const RouteNavigation = createHookStory(() => {
-  return (h("div", null,
-    h("button", { onClick: () => navigation.push("/") }, "/"),
-    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
-    h("button", { onClick: () => navigation.push("/bar") }, "/bar"),
-    h("button", { onClick: () => navigation.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => navigation.push("/refer") }, "/refer"),
-    h("button", { onClick: () => navigation.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => navigation.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => navigation.back() }, "Back"),
-    h("button", { onClick: () => navigation.forward() }, "Forward"),
-    h("hr", null),
-    h("sqm-router", { innerHTML: routes })));
-});
-export const Styling = createHookStory(() => {
-  return (h("div", null,
-    h("button", { onClick: () => navigation.push("/") }, "/"),
-    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
-    h("hr", null),
-    h("div", { style: { display: "flex", justifyContent: "space-around" } },
-      h("sqm-router", { innerHTML: `<template path="/">
-      
-      <div>Column 1</div>
-      <div>Column 2 </div>
-      </template>` }))));
-});
-function useTemplate(templateString) {
-  const [editedTemplate, setEditedTemplate] = useState(templateString);
-  const [previewTemplate, setPreviewTemplate] = useState(templateString);
-  function setPath(e) {
-    //@ts-ignore
-    navigation.push(e.target.value);
-  }
-  return {
-    states: { previewTemplate, editedTemplate },
-    callbacks: { setEditedTemplate, setPreviewTemplate, setPath },
-  };
-}
-const defaultRouter = `
-<sqm-router>
-  <template path="/">
-  <div>hello world</div>
-  </template>
-</sqm-router>
-`;
-function TemplateView(props) {
-  const { states, callbacks } = props;
-  return [
-    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
-    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
-    h("label", null,
-      "Current path:",
-      h("input", { onInput: callbacks.setPath, value: "/" })),
-    h("div", { innerHTML: states.previewTemplate }),
-  ];
-}
-export const RouterPlayground = createHookStory(() => {
-  const { states, callbacks } = useTemplate(defaultRouter);
-  return h(TemplateView, { states: states, callbacks: callbacks });
-});
+import { navigation } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/stencil-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Tests/Router",
+};
+const templates = `
+    <template path="/foo"><h1>foo</h1>
+    
+    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
+
+    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
+    </template>
+    <template path="/bar"><h2>bar</h2>
+    
+    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
+    </template>
+    <template path="/baz/bang"><h3>baz/bang</h3>
+    <pre>
+    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
+    ░░▀███░░░░▀██░░░░██▀░░░░██░░
+    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
+    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
+    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
+    ░░░░░░███░░░░▄███░░░░█▀░░░░░
+    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
+    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
+    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
+    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
+    </pre>
+    </template>
+    <template path="/refer/:page"><h3>/refer/:page</h3>
+    <pre>
+      refer/:page
+    </pre>
+    </template>
+`;
+const routes = `
+    <sqm-route path="/foo"><h1>foo</h1>
+    
+    <p>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.
+
+    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details.</p>
+    </sqm-route>
+    <sqm-route path="/bar"><h2>bar</h2>
+    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>
+    </sqm-route>
+    <sqm-route path="/baz/bang"><h3>baz/bang</h3>
+    <pre>
+    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄
+    ░░▀███░░░░▀██░░░░██▀░░░░██░░
+    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░
+    ░░░░███░░░░░▀██▄█░░░░░░█░░░░
+    ░░░░░███░░░░░▀██░░░░░░█▀░░░░
+    ░░░░░░███░░░░▄███░░░░█▀░░░░░
+    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░
+    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░
+    ░░░░░░░░▀██▀░░░░░███░░░░░░░░
+    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░
+    </pre>
+    </sqm-route>
+    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>
+    <pre>
+      refer/:page
+    </pre>
+    </sqm-route>
+`;
+export const TemplateNavigation = createHookStory(() => {
+  return (h("div", null,
+    h("button", { onClick: () => navigation.push("/") }, "/"),
+    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
+    h("button", { onClick: () => navigation.push("/bar") }, "/bar"),
+    h("button", { onClick: () => navigation.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => navigation.push("/refer") }, "/refer"),
+    h("button", { onClick: () => navigation.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => navigation.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => navigation.back() }, "Back"),
+    h("button", { onClick: () => navigation.forward() }, "Forward"),
+    h("hr", null),
+    h("sqm-router", { innerHTML: templates })));
+});
+export const RouteNavigation = createHookStory(() => {
+  return (h("div", null,
+    h("button", { onClick: () => navigation.push("/") }, "/"),
+    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
+    h("button", { onClick: () => navigation.push("/bar") }, "/bar"),
+    h("button", { onClick: () => navigation.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => navigation.push("/refer") }, "/refer"),
+    h("button", { onClick: () => navigation.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => navigation.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => navigation.back() }, "Back"),
+    h("button", { onClick: () => navigation.forward() }, "Forward"),
+    h("hr", null),
+    h("sqm-router", { innerHTML: routes })));
+});
+export const Styling = createHookStory(() => {
+  return (h("div", null,
+    h("button", { onClick: () => navigation.push("/") }, "/"),
+    h("button", { onClick: () => navigation.push("/foo") }, "/foo"),
+    h("hr", null),
+    h("div", { style: { display: "flex", justifyContent: "space-around" } },
+      h("sqm-router", { innerHTML: `<template path="/">
+      
+      <div>Column 1</div>
+      <div>Column 2 </div>
+      </template>` }))));
+});
+function useTemplate(templateString) {
+  const [editedTemplate, setEditedTemplate] = useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = useState(templateString);
+  function setPath(e) {
+    //@ts-ignore
+    navigation.push(e.target.value);
+  }
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate, setPath },
+  };
+}
+const defaultRouter = `
+<sqm-router>
+  <template path="/">
+  <div>hello world</div>
+  </template>
+</sqm-router>
+`;
+function TemplateView(props) {
+  const { states, callbacks } = props;
+  return [
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    h("label", null,
+      "Current path:",
+      h("input", { onInput: callbacks.setPath, value: "/" })),
+    h("div", { innerHTML: states.previewTemplate }),
+  ];
+}
+export const RouterPlayground = createHookStory(() => {
+  const { states, callbacks } = useTemplate(defaultRouter);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});

package/dist/collection/components/sqm-router/sqm-router.css

@@ -1,7 +1,7 @@
-sqm-router {
-  /** 
-    Acts like a slot, doesn't provide it's own box 
-    see: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box
-  **/
-  display: contents;
-}
+sqm-router {
+  /** 
+    Acts like a slot, doesn't provide it's own box 
+    see: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box
+  **/
+  display: contents;
+}

package/dist/collection/components/sqm-router/sqm-router.js

@@ -1,30 +1,31 @@
-import { h, Component, Host, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useRouter } from "./useRouter";
-/**
- * @uiName Router (for pages)
- */
-export class SqmRouter {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { callbacks } = useRouter();
-    return (h(Host, null,
-      h("div", { ref: callbacks.setSlot, style: { display: "none" } },
-        h("slot", null)),
-      h("div", { style: { display: "contents" }, ref: callbacks.setContainer })));
-  }
-  static get is() { return "sqm-router"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-router.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-router.css"]
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { h, Component, Host, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useRouter } from "./useRouter";
+/**
+ * @uiName Router
+ * @slots [{"name":"","title":"Routes"}]
+ */
+export class SqmRouter {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { callbacks } = useRouter();
+    return (h(Host, null,
+      h("div", { ref: callbacks.setSlot, style: { display: "none" } },
+        h("slot", null)),
+      h("div", { style: { display: "contents" }, ref: callbacks.setContainer })));
+  }
+  static get is() { return "sqm-router"; }
+  static get originalStyleUrls() { return {
+    "$": ["sqm-router.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sqm-router.css"]
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-router/useRouter.js

@@ -1,79 +1,79 @@
-import { useCurrentPage, useHost } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { pathToRegexp } from "path-to-regexp";
-import debugFn from "debug";
-const debug = debugFn("sq:useRouter");
-function matchPath(pattern, page) {
-  if (!pattern)
-    return;
-  const regexp = pathToRegexp(pattern);
-  return regexp.exec(page);
-}
-export function useRouter() {
-  const location = useCurrentPage();
-  const host = useHost();
-  const [slot, setSlot] = useState(undefined);
-  const [container, setContainer] = useState(undefined);
-  const page = location.pathname;
-  // convert sqm-routes into templates
-  useEffect(() => {
-    const routes = host.querySelectorAll(`sqm-route`);
-    const routesArray = Array.from(routes);
-    routesArray.forEach((route) => {
-      const newTemplate = document.createElement("template");
-      newTemplate.setAttribute("path", route.path);
-      newTemplate.innerHTML = route.innerHTML;
-      route.parentNode.appendChild(newTemplate);
-      route.parentNode.removeChild(route);
-    });
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    if (!container || !slot) {
-      debug("DOM not ready for navigation rendering on:", page);
-      return;
-    }
-    // <template>
-    const templates = slot.querySelectorAll(`template`);
-    const templatesArray = Array.from(templates);
-    const template = templatesArray.find((template) => {
-      var _a, _b, _c;
-      //@ts-ignore
-      const path = (_b = (_a = template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-      if ((_c = matchPath(path, page)) === null || _c === void 0 ? void 0 : _c.length)
-        return template;
-    });
-    //@ts-ignore - can't access template attributes directly
-    const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-    debug({
-      containerDatasetPage: container.dataset.page,
-      templatePath,
-      page,
-    });
-    // if no routes found, and the old route doesn't match the new route
-    if (!template) {
-      // No matching page, display nothing
-      debug("No matching page found for ", page, ", so render nothing");
-      container.innerHTML = "";
-      container.dataset.page = page;
-      return;
-    }
-    debug("Page updated to ", page, template);
-    // if pathToRegexp results truthy or page is an exact match
-    if (!!matchPath(templatePath, container.dataset.page)) {
-      debug("don't rerender");
-      // Same page, do not re-render
-      // Reduces dom mutations, speeds up page speed
-    }
-    else if (template) {
-      container.innerHTML = template.innerHTML;
-      container.dataset.page = page;
-    }
-  }, [slot, container, page]);
-  return {
-    callbacks: {
-      setSlot,
-      setContainer,
-    },
-  };
-}
+import { useCurrentPage, useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { pathToRegexp } from "path-to-regexp";
+import debugFn from "debug";
+const debug = debugFn("sq:useRouter");
+function matchPath(pattern, page) {
+  if (!pattern)
+    return;
+  const regexp = pathToRegexp(pattern);
+  return regexp.exec(page);
+}
+export function useRouter() {
+  const location = useCurrentPage();
+  const host = useHost();
+  const [slot, setSlot] = useState(undefined);
+  const [container, setContainer] = useState(undefined);
+  const page = location.pathname;
+  // convert sqm-routes into templates
+  useEffect(() => {
+    const routes = host.querySelectorAll(`sqm-route`);
+    const routesArray = Array.from(routes);
+    routesArray.forEach((route) => {
+      const newTemplate = document.createElement("template");
+      newTemplate.setAttribute("path", route.path);
+      newTemplate.innerHTML = route.innerHTML;
+      route.parentNode.appendChild(newTemplate);
+      route.parentNode.removeChild(route);
+    });
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    if (!container || !slot) {
+      debug("DOM not ready for navigation rendering on:", page);
+      return;
+    }
+    // <template>
+    const templates = slot.querySelectorAll(`template`);
+    const templatesArray = Array.from(templates);
+    const template = templatesArray.find((template) => {
+      var _a, _b, _c;
+      //@ts-ignore
+      const path = (_b = (_a = template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
+      if ((_c = matchPath(path, page)) === null || _c === void 0 ? void 0 : _c.length)
+        return template;
+    });
+    //@ts-ignore - can't access template attributes directly
+    const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
+    debug({
+      containerDatasetPage: container.dataset.page,
+      templatePath,
+      page,
+    });
+    // if no routes found, and the old route doesn't match the new route
+    if (!template) {
+      // No matching page, display nothing
+      debug("No matching page found for ", page, ", so render nothing");
+      container.innerHTML = "";
+      container.dataset.page = page;
+      return;
+    }
+    debug("Page updated to ", page, template);
+    // if pathToRegexp results truthy or page is an exact match
+    if (!!matchPath(templatePath, container.dataset.page)) {
+      debug("don't rerender");
+      // Same page, do not re-render
+      // Reduces dom mutations, speeds up page speed
+    }
+    else if (template) {
+      container.innerHTML = template.innerHTML;
+      container.dataset.page = page;
+    }
+  }, [slot, container, page]);
+  return {
+    callbacks: {
+      setSlot,
+      setContainer,
+    },
+  };
+}