@functionalcms/svelte-components 3.0.5 → 3.0.7

package/dist/components/agnostic/Tabs/Tabs.svelte

@@ -171,110 +171,179 @@ if we'd like to only blank out buttons but otherwise skin ourselves. */
 
 </style>
 
-<script>export let size = "";
-export let tabs = [];
-export let isBorderless = false;
-export let isVerticalOrientation = false;
-export let isDisabled = false;
-export let disabledOptions = [];
-export let isSkinned = true;
-let dynamicComponentRefs = [];
-let tabButtonRefs = [];
-$: dynamicComponentRefs = [];
-$: tabButtonRefs = [];
-const baseStyles = () => `tabs ${isVerticalOrientation ? "tabs-vertical" : ""}`;
-const selectTab = (index) => {
-  tabs = tabs.map((tab, i) => {
-    tab.isActive = index === i ? true : false;
-    return tab;
-  });
-};
-let activeTabs = tabs.filter((tab) => tab.isActive);
-if (activeTabs.length === 0) {
-  selectTab(0);
-}
-$: tablistClasses = () => {
-  const tabListClass = isSkinned ? "tab-list" : "tab-list-base";
-  return [tabListClass, isBorderless ? `tab-borderless` : ""].filter((klass) => klass.length).join(" ");
-};
-$: tabButtonClasses = (tab) => {
-  const klasses = [
-    `tab-item`,
-    `tab-button`,
-    tab.isActive ? "active" : "",
-    size === "large" ? "tab-button-large" : "",
-    size === "xlarge" ? "tab-button-xlarge" : ""
-  ];
-  return klasses.filter((klass) => klass.length).join(" ");
-};
-const focusTab = (index, direction) => {
-  let i = index;
-  if (direction === "asc") {
-    i += 1;
-  } else if (direction === "desc") {
-    i -= 1;
-  }
-  if (i < 0) {
-    i = tabs.length - 1;
-  } else if (i >= tabs.length) {
-    i = 0;
-  }
-  let nextTab;
-  if (tabButtonRefs.length) {
-    nextTab = tabButtonRefs[i];
-  } else if (dynamicComponentRefs.length) {
-    nextTab = dynamicComponentRefs[i];
-  }
-  if (nextTab.isDisabled && nextTab.isDisabled() || nextTab.disabled && direction) {
-    focusTab(i, direction);
-  } else {
-    nextTab.focus();
-  }
-};
-const handleKeyDown = (ev, index) => {
-  switch (ev.key) {
-    case "Up":
-    case "ArrowUp":
-      if (isVerticalOrientation) {
-        focusTab(index, "desc");
-      }
-      break;
-    case "Down":
-    case "ArrowDown":
-      if (isVerticalOrientation) {
-        focusTab(index, "asc");
-      }
-      break;
-    case "Left":
-    case "ArrowLeft":
-      if (!isVerticalOrientation) {
-        focusTab(index, "desc");
-      }
-      break;
-    case "Right":
-    case "ArrowRight":
-      if (!isVerticalOrientation) {
-        focusTab(index, "asc");
-      }
-      break;
-    case "Home":
-    case "ArrowHome":
-      focusTab(0);
-      break;
-    case "End":
-    case "ArrowEnd":
-      focusTab(tabs.length - 1);
-      break;
-    case "Enter":
-    case "Space":
-      focusTab(index);
-      selectTab(index);
-      break;
-    default:
-      return;
-  }
-  ev.preventDefault();
-};
+<script lang="ts">
+	import type { NavigationDirection, Tab, TabSizes } from './api';
+
+	export let size: TabSizes = '';
+
+	/**
+   * This is an array of objects in shape like:
+   * {
+      title: "Tab 3",
+      tabPanelComponent: MyTabPanel,
+      // This is optional and only if you want to supply your own custom tab buttons.
+      // If not passed, we will generate an internal default tab button.
+      tabButtonComponent: TabButton3,
+    },
+   */
+	export let tabs: Tab[] = [];
+
+	export let isBorderless = false;
+	export let isVerticalOrientation = false;
+	export let isDisabled = false;
+	export let disabledOptions: string[] = [];
+	export let isSkinned = true;
+
+	/**
+	 * Explanation: we have two ways that the tab buttons get created:
+	 * 1. The `tabs` input array has dynamic `tabButtonComponent` components.
+	 * 2. The `tabs` has no `tabButtonComponent` and so we generate the tab
+	 * button internally.
+	 *
+	 * As such, the `dynamicComponentRefs` below are refs for case 1. and
+	 * `tabButtonRefs` are refs for case 2.
+	 */
+	let dynamicComponentRefs = []; // https://svelte.dev/tutorial/component-this
+	let tabButtonRefs = [];
+
+	// handle element removal by filtering null
+	$: dynamicComponentRefs = [];
+	// dynamicComponentRefs.filter(el => el);
+	// $: console.log(dynamicComponentRefs);
+	$: tabButtonRefs = [];
+	// tabButtonRefs.filter(el => el);
+	// $: console.log(tabButtonRefs);
+
+	// onMount(() => {
+	//   console.log(tabButtonRefs);
+	// });
+	const baseStyles = () =>
+		`tabs ${isVerticalOrientation ? 'tabs-vertical' : ''}`;
+
+	const selectTab = (index: number) => {
+		tabs = tabs.map((tab, i) => {
+			tab.isActive = index === i ? true : false;
+			return tab;
+		});
+	};
+	let activeTabs = tabs.filter((tab: Tab) => tab.isActive);
+	if (activeTabs.length === 0) {
+		selectTab(0);
+	}
+
+	$: tablistClasses = () => {
+		const tabListClass = isSkinned ? 'tab-list' : 'tab-list-base';
+		return [tabListClass, isBorderless ? `tab-borderless` : '']
+			.filter((klass) => klass.length)
+			.join(' ');
+	};
+
+	$: tabButtonClasses = (tab: Tab) => {
+		const klasses = [
+			`tab-item`,
+			`tab-button`,
+			tab.isActive ? 'active' : '',
+			size === 'large' ? 'tab-button-large' : '',
+			size === 'xlarge' ? 'tab-button-xlarge' : ''
+		];
+		return klasses.filter((klass) => klass.length).join(' ');
+	};
+
+	const focusTab = (index: number, direction?: NavigationDirection) => {
+		// console.log("tabButtonRefs: ", tabButtonRefs);
+		// console.log("dynamicComponentRefs: ", dynamicComponentRefs);
+		/**
+		 * direction is optional because we only need that when we're arrow navigating.
+		 * If they've hit ENTER|SPACE we're focusing the current item. If HOME focus(0).
+		 * If END focus(tabButtons.length - 1)...and so on.
+		 */
+		let i = index;
+		if (direction === 'asc') {
+			i += 1;
+		} else if (direction === 'desc') {
+			i -= 1;
+		}
+
+		// Circular navigation
+		//
+		// If we've went beyond "start" circle around to last
+		if (i < 0) {
+			i = tabs.length - 1;
+		} else if (i >= tabs.length) {
+			// We've went beyond "last" so circle around to first
+			i = 0;
+		}
+
+		/**
+		 * Figure out at run-time whether this was build with dynamicComponentRefs (consumer
+		 * used their own tabButtonComponent), or tabButtonRefs (we generated the buttons here)
+		 */
+
+		let nextTab;
+		if (tabButtonRefs.length) {
+			nextTab = tabButtonRefs[i];
+		} else if (dynamicComponentRefs.length) {
+			// Same logic as above, but we're using the binding to component instance
+			nextTab = dynamicComponentRefs[i];
+		}
+		// Edge case: We hit a tab button that's been disabled. If so, we recurse, but
+		// only if we've been supplied a `direction`. Otherwise, nothing left to do.
+		if (
+			(nextTab.isDisabled && nextTab.isDisabled()) ||
+			(nextTab.disabled && direction)
+		) {
+			// Retry with new `i` index going in same direction
+			focusTab(i, direction);
+		} else {
+			// Nominal case is to just focs next tab :)
+			nextTab.focus();
+		}
+	};
+
+	const handleKeyDown = (ev: KeyboardEvent, index: number) => {
+		switch (ev.key) {
+			case 'Up': // These first cases are IEEdge :(
+			case 'ArrowUp':
+				if (isVerticalOrientation) {
+					focusTab(index, 'desc');
+				}
+				break;
+			case 'Down':
+			case 'ArrowDown':
+				if (isVerticalOrientation) {
+					focusTab(index, 'asc');
+				}
+				break;
+			case 'Left':
+			case 'ArrowLeft':
+				if (!isVerticalOrientation) {
+					focusTab(index, 'desc');
+				}
+				break;
+			case 'Right':
+			case 'ArrowRight':
+				if (!isVerticalOrientation) {
+					focusTab(index, 'asc');
+				}
+				break;
+			case 'Home':
+			case 'ArrowHome':
+				focusTab(0);
+				break;
+			case 'End':
+			case 'ArrowEnd':
+				focusTab(tabs.length - 1);
+				break;
+			case 'Enter':
+			case 'Space':
+				focusTab(index);
+				selectTab(index);
+				break;
+			default:
+				return;
+		}
+		ev.preventDefault();
+	};
 </script>
 
 <div class="{baseStyles()}">

package/dist/components/agnostic/Tag/Tag.svelte

@@ -57,16 +57,20 @@
 
 </style>
 
-<script>export let isUppercase = false;
-export let isSkinned = true;
-export let type = "";
-export let shape = "";
-const tagClasses = [
-  isSkinned ? "tag" : "tag-base",
-  type ? `tag-${type}` : "",
-  shape ? `tag-${shape}` : "",
-  isUppercase ? "tag-upper" : ""
-].filter((c) => c).join(" ");
+<script lang="ts">
+  export let isUppercase = false;
+  export let isSkinned = true;
+  export let type = "";
+  export let shape = "";
+
+  const tagClasses = [
+    isSkinned ? "tag" : "tag-base",
+    type ? `tag-${type}` : "",
+    shape ? `tag-${shape}` : "",
+    isUppercase ? "tag-upper" : "",
+  ]
+    .filter((c) => c)
+    .join(" ");
 </script>
 
 <span class={tagClasses}>

package/dist/components/agnostic/Tag/TagSlots.svelte

@@ -4,7 +4,8 @@
   }
 </style>
 
-<script>import Tag from "./Tag.svelte";
+<script lang="ts">
+  import Tag from "./Tag.svelte";
 </script>
 
 <div>

package/dist/components/agnostic/Toasts/Toasts.svelte

@@ -18,25 +18,35 @@
 
 </style>
 
-<script>import { onMount } from "svelte";
-export let portalRootSelector = "body";
-export let horizontalPosition;
-export let verticalPosition;
-const portalTarget = portalRootSelector || "body";
-$: toastClasses = [
-  "alert-toast",
-  horizontalPosition,
-  verticalPosition
-].filter((c) => c.length).join(" ");
-let mounted = false;
-onMount(() => mounted = true);
-const teleportNode = async (node) => {
-  const destination = document.querySelector(portalTarget);
-  destination.appendChild(node);
-};
-const teleport = (node) => {
-  teleportNode(node);
-};
+<script lang="ts">
+  import { onMount } from "svelte";
+  export let portalRootSelector = "body";
+  export let horizontalPosition: "start" | "center" | "end";
+  export let verticalPosition: "top" | "bottom";
+  const portalTarget = portalRootSelector || "body";
+
+  $: toastClasses = [
+    "alert-toast",
+    horizontalPosition,
+    verticalPosition
+  ].filter(c => c.length).join(" ");
+
+  // In case of SSR we don't render element until hydration is complete
+  let mounted = false;
+  onMount(() => (mounted = true));
+
+  const teleportNode = async (node) => {
+    const destination = document.querySelector(portalTarget);
+    destination.appendChild(node);
+  };
+
+  /**
+   * Svelte actions don't want to be async so this is a hack
+   * to get around that by delegating to teleportNode
+   */
+  const teleport = (node) => {
+    teleportNode(node);
+  };
 </script>
 
 {#if mounted}

package/dist/components/agnostic/Tooltip/Tooltip.svelte

@@ -18,74 +18,91 @@
 }
 
 </style>
-<script>import {
-  computePosition,
-  flip,
-  offset as fuOffset,
-  shift,
-  arrow
-} from "@floating-ui/dom";
-export let placement = "top";
-export let offset = 6;
-let tooltipRef;
-let tooltipTargetRef;
-let tooltipArrowRef;
-const uid = () => `tip-${Date.now().toString(32)}-${Math.random().toString(16).replace(/\./g, "").toString()}`;
-const id = uid();
-const update = () => {
-  const tip = tooltipRef;
-  const target = tooltipTargetRef;
-  const arrowEl = tooltipArrowRef;
-  if (tip && target && arrowEl) {
-    computePosition(target, tip, {
-      placement,
-      middleware: [
-        fuOffset(offset),
-        flip(),
-        shift({ padding: 4 }),
-        arrow({
-          element: arrowEl,
-          // Offset from edge; fixes issue on left-start, left-end, right-start,
-          // etc., where arrow oddly overlaps the rounded corner of content box
-          padding: 10
-        })
-      ]
-    }).then(({ x, y, placement: placement2, middlewareData }) => {
-      const arrowX = middlewareData.arrow.x;
-      const arrowY = middlewareData.arrow.y;
-      const staticSide = {
-        top: "bottom",
-        right: "left",
-        bottom: "top",
-        left: "right"
-      }[placement2.split("-")[0]];
-      Object.assign(tip.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-      Object.assign(arrowEl.style, {
-        left: typeof arrowX === "number" ? `${arrowX}px` : "",
-        top: typeof arrowY === "number" ? `${arrowY}px` : "",
-        right: "",
-        bottom: "",
-        [staticSide]: "-4px"
-      });
-    });
-  }
-};
-const showTooltip = () => {
-  if (tooltipRef) {
-    tooltipRef.style.display = "block";
-  }
-  update();
-};
-const hideTooltip = () => {
-  if (tooltipRef) {
-    tooltipRef.style.display = "";
-  }
-};
-const tooltipClasses = "tooltip";
-const tooltipArrowClasses = "tooltip-arrow";
+<script lang="ts">
+  import {
+    computePosition,
+    flip,
+    offset as fuOffset,
+    shift,
+    arrow,
+  } from "@floating-ui/dom";
+  import type { TooltipPlacement } from './api';
+
+  export let placement: TooltipPlacement = "top";
+  export let offset: number = 6;
+
+  let tooltipRef;
+  let tooltipTargetRef;
+  let tooltipArrowRef;
+
+  const uid = () =>
+    `tip-${Date.now().toString(32)}-${Math.random()
+      .toString(16)
+      .replace(/\./g, "")
+      .toString()}`;
+
+  const id = uid();
+
+
+  const update = () => {
+    const tip = tooltipRef;
+    const target = tooltipTargetRef;
+    const arrowEl = tooltipArrowRef;
+
+    if (tip && target && arrowEl) {
+      computePosition(target, tip, {
+        placement: placement,
+        middleware: [
+          fuOffset(offset),
+          flip(),
+          shift({ padding: 4 }),
+          arrow({
+            element: arrowEl,
+            // Offset from edge; fixes issue on left-start, left-end, right-start,
+            // etc., where arrow oddly overlaps the rounded corner of content box
+            padding: 10,
+          }),
+        ],
+      }).then(({ x, y, placement, middlewareData }) => {
+        const arrowX = middlewareData.arrow!.x;
+        const arrowY = middlewareData.arrow!.y;
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right",
+        }[placement.split("-")[0]]!;
+
+        Object.assign(tip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+
+        Object.assign(arrowEl.style, {
+          left: typeof arrowX === "number" ? `${arrowX}px` : "",
+          top: typeof arrowY === "number" ? `${arrowY}px` : "",
+          right: "",
+          bottom: "",
+          [staticSide]: "-4px",
+        });
+      });
+    }
+  }
+
+  const showTooltip = () => {
+    if (tooltipRef) {
+      tooltipRef.style.display = "block";
+    }
+    update();
+  };
+
+  const hideTooltip = () => {
+    if (tooltipRef) {
+      tooltipRef.style.display = "";
+    }
+  };
+  const tooltipClasses = "tooltip";
+  const tooltipArrowClasses = "tooltip-arrow";
 </script>
 <div
   bind:this={tooltipTargetRef}

package/dist/components/agnostic/Tooltip/TooltipSlots.svelte

@@ -16,7 +16,8 @@
   }
 </style>
 
-<script>import Tooltip from "./Tooltip.svelte";
+<script lang="ts">
+  import Tooltip from "./Tooltip.svelte";
 </script>
 
 <div class="h4 mbs40">Tooltips</div>

package/dist/components/blog/BlogDescription.svelte

@@ -1,7 +1,9 @@
-<script>import Link from "../Link.svelte";
-import { Justify } from "../Styling.js";
-export let description;
-export let css = "";
+<script lang="ts">
+	import Link from "../Link.svelte";
+	import { Justify } from "../Styling.js";
+
+	export let description: string;
+	export let css: string = "";
 </script>
 
 <div class={css}>

package/dist/components/blog/BlogTitle.svelte

@@ -1,9 +1,11 @@
-<script>export let slug = "";
-export let path = "";
-export let title;
-export let css = "";
-const href = `${path}/${slug}`;
-const isLink = slug != "";
+<script lang="ts">
+	export let slug = '';
+	export let path: string = '';
+	export let title: string;
+	export let css: string = ""; 
+
+	const href = `${path}/${slug}`;
+	const isLink = slug != '';
 </script>
 
 <h1 class={css}>