@functionalcms/svelte-components 3.0.6 → 3.0.8

package/dist/components/agnostic/Icon/Icon.svelte

@@ -153,26 +153,34 @@
 }
 </style>
 
-<script>import { onMount } from "svelte";
-export let type = "";
-export let size = 14;
-export let isSkinned = true;
-let spanRef;
-const iconClasses = [
-  "screenreader-only",
-  isSkinned ? "icon" : "icon-base",
-  type ? `icon-${type}` : "",
-  size ? `icon-${size}` : ""
-].filter((cls) => cls).join(" ");
-onMount(() => {
-  const svg = spanRef.querySelector("svg");
-  svg.classList.add("icon-svg");
-  if (svg) {
-    if (size) svg.classList.add(`icon-svg-${size}`);
-    if (type) svg.classList.add(`icon-svg-${type}`);
-    spanRef.classList.remove("screenreader-only");
-  }
-});
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { IconSize, IconType } from './api';
+  export let type: IconType = '';
+  export let size: IconSize = 14;
+  export let isSkinned = true;
+  let spanRef;
+
+  const iconClasses = [
+    "screenreader-only",
+    isSkinned ? "icon" : "icon-base",
+    type ? `icon-${type}` : "",
+    size ? `icon-${size}` : "",
+  ]
+    .filter((cls) => cls)
+    .join(" ");
+
+  onMount(() => {
+    const svg = spanRef.querySelector("svg");
+    svg.classList.add("icon-svg");
+    if (svg) {
+      if (size) svg.classList.add(`icon-svg-${size}`);
+      if (type) svg.classList.add(`icon-svg-${type}`);
+
+      // Now that we've setup our SVG classes we can visually unhide the icon
+      spanRef.classList.remove("screenreader-only");
+    }
+  });
 </script>
 
 <span bind:this={spanRef} class={iconClasses}>

package/dist/components/agnostic/Loader/Loader.svelte

@@ -103,9 +103,12 @@
 }
 
 </style>
-<script>export let ariaLabel = "Loading\u2026";
-export let size = "";
-export let loaderClasses = ["loader", size ? `loader-${size}` : ""].filter((c) => c).join(" ");
+<script lang="ts">
+  export let ariaLabel = "Loading…";
+  export let size: "small" | "large" | "" = "";
+  export let loaderClasses: string = ["loader", size ? `loader-${size}` : ""]
+    .filter((c) => c)
+    .join(" ");
 </script>
 
 <div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">

package/dist/components/agnostic/Progress/Progress.svelte

@@ -41,10 +41,11 @@
 
 </style>
 
-<script>export let value = 0;
-export let max;
-export let css = "";
-let klasses = ["progress", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+<script lang="ts">
+  export let value = 0;
+  export let max;
+  export let css = "";
+  let klasses: string = ["progress", css ? `${css}` : ""].filter(cl => cl && cl.length).join(' ');
 </script>
 
 <progress class={klasses} value={value} max={max}></progress>

package/dist/components/agnostic/Spinner/Spinner.svelte

@@ -95,9 +95,12 @@
 
 </style>
 
-<script>export let ariaLabel = "Loading\u2026";
-export let size = "";
-$: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""].filter((c) => c).join(" ");
+<script lang="ts">
+  export let ariaLabel = "Loading…";
+  export let size: "small" | "large" | "xlarge" | "" = "";
+  $: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""]
+    .filter((c) => c)
+    .join(" ");
 </script>
 
 <div class={spinnerClasses} role="status" aria-live="polite" aria-busy="true">

package/dist/components/agnostic/Table/Table.svelte

@@ -255,140 +255,197 @@
 
 </style>
 
-<script>import { createEventDispatcher } from "svelte";
-export let headers = [];
-headers.labelByKey = function() {
-  return this.reduce(function(rv, x) {
-    if (!("key" in x))
-      throw new Error(
-        "Header must have key value with `sortByKey` set to `true`"
-      );
-    rv[x.key] = x;
-    return rv;
-  }, {});
-};
-export let rows = [];
-export let caption = "";
-export let captionPosition = "hidden";
-export let tableSize = "";
-export let responsiveSize = "";
-export let isUppercasedHeaders = false;
-export let isBordered = false;
-export let isBorderless = false;
-export let isStriped = false;
-export let isHoverable = false;
-export let isStacked = false;
-export let filterByKey = false;
-export let offset = 0;
-export let limit = 0;
-let direction = "none";
-let sortingKey = "";
-const dispatch = createEventDispatcher();
-$: dispatch("sort", {
-  direction,
-  sortingKey
-});
-const pluckColumnToSort = (rowLeft, rowRight) => {
-  const colLeft = rowLeft[sortingKey] === null || rowLeft[sortingKey] === void 0 ? -Infinity : rowLeft[sortingKey];
-  const colRight = rowRight[sortingKey] === null || rowRight[sortingKey] === void 0 ? -Infinity : rowRight[sortingKey];
-  return {
-    colLeft,
-    colRight
-  };
-};
-const internalSort = (rowLeft, rowRight) => {
-  let { colLeft, colRight } = pluckColumnToSort(rowLeft, rowRight);
-  const headerWithCustomSortFunction = headers.find(
-    (h) => h.key === sortingKey && !!h.sortFn
-  );
-  if (headerWithCustomSortFunction && headerWithCustomSortFunction.sortFn) {
-    return headerWithCustomSortFunction.sortFn(colLeft, colRight);
-  }
-  colLeft = typeof colLeft === "string" ? colLeft.toLowerCase().replace(/(^\$|,)/g, "") : colLeft;
-  colRight = typeof colRight === "string" ? colRight.toLowerCase().replace(/(^\$|,)/g, "") : colRight;
-  colLeft = !Number.isNaN(Number(colLeft)) ? Number(colLeft) : colLeft;
-  colRight = !Number.isNaN(Number(colRight)) ? Number(colRight) : colRight;
-  if (colLeft > colRight) {
-    return 1;
-  }
-  if (colLeft < colRight) {
-    return -1;
-  }
-  return 0;
-};
-const descendingSort = (row1, row2) => internalSort(row1, row2) * -1;
-$: columns = filterByKey ? headers.labelByKey() : { ...headers };
-$: sortableItems = direction === "ascending" ? rows.sort(internalSort) : direction === "descending" ? rows.sort(descendingSort) : sortableItems = [...rows];
-$: visibleItems = sortableItems.slice(
-  offset ? offset : 0,
-  limit ? offset + limit : void 0
-);
-const handleSortClicked = (headerKey) => {
-  if (sortingKey !== headerKey) {
-    direction = "none";
-    sortingKey = headerKey;
-  }
-  switch (direction) {
-    case "ascending":
-      direction = "descending";
-      break;
-    case "descending":
-      direction = "none";
-      break;
-    case "none":
-      direction = "ascending";
-      break;
-    default:
-      console.warn(
-        "Table sorting only supports directions: ascending | descending | none"
-      );
-  }
-};
-const getSortingClassesFor = (headerKey, direction2, sortingKey2) => {
-  if (sortingKey2 === headerKey) {
-    return [
-      "icon-sort",
-      direction2 && direction2 !== "none" ? `icon-sort-${direction2}` : ""
-    ].filter((klass) => klass.length).join(" ");
-  }
-  return "icon-sort";
-};
-const getSortDirectionFor = (headerKey, direction2, sortingKey2) => {
-  if (sortingKey2 !== headerKey) {
-    return "none";
-  } else {
-    return direction2;
-  }
-};
-const tableResponsiveClasses = () => {
-  return [
-    !responsiveSize ? "table-responsive" : "",
-    responsiveSize ? `table-responsive-${responsiveSize}` : ""
-  ].filter((klass) => klass.length).join(" ");
-};
-const tableClasses = () => {
-  return [
-    "table",
-    tableSize ? `table-${tableSize}` : "",
-    isUppercasedHeaders ? "table-caps" : "",
-    isBordered ? "table-bordered" : "",
-    isBorderless ? "table-borderless" : "",
-    isStriped ? "table-striped" : "",
-    isHoverable ? "table-hoverable" : "",
-    isStacked ? "table-stacked" : ""
-  ].filter((klass) => klass.length).join(" ");
-};
-const captionClasses = () => {
-  return [
-    // .screenreader-only is expected to be globally available via common.min.css
-    captionPosition === "hidden" ? "screenreader-only" : "",
-    captionPosition !== "hidden" ? `caption-${captionPosition}` : ""
-  ].filter((klass) => klass.length).join(" ");
-};
-const getKeys = (row) => {
-  const filteredKeys = filterByKey ? Object.keys(columns).map((key) => [key, key]) : Object.keys(row).map((key, index) => [key, index]);
-  return filteredKeys;
-};
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  // Hack: Preserves way it was done in agnostic-svelte but ugly :(
+  interface ArrayMonkeyPatched extends Array<any> {
+    labelByKey(): any[];
+  }
+  export let headers: ArrayMonkeyPatched = [] as ArrayMonkeyPatched;
+  headers.labelByKey = function () {
+    return this.reduce(function (rv, x) {
+      if (!("key" in x))
+        throw new Error(
+          "Header must have key value with `sortByKey` set to `true`"
+        );
+      rv[x.key] = x;
+      return rv;
+    }, {});
+  };
+  export let rows = [];
+
+  export let caption = "";
+  export let captionPosition = "hidden";
+  export let tableSize = "";
+  export let responsiveSize = "";
+  export let isUppercasedHeaders = false;
+  export let isBordered = false;
+  export let isBorderless = false;
+  export let isStriped = false;
+  export let isHoverable = false;
+  export let isStacked = false;
+  export let filterByKey = false;
+  export let offset = 0;
+  export let limit = 0;
+
+  // State
+  let direction = "none";
+  let sortingKey = "";
+
+  // Trigger event on sort
+  const dispatch = createEventDispatcher();
+  $: dispatch("sort", {
+    direction,
+    sortingKey,
+  });
+
+  const pluckColumnToSort = (rowLeft, rowRight) => {
+    const colLeft =
+      rowLeft[sortingKey] === null || rowLeft[sortingKey] === undefined
+        ? -Infinity
+        : rowLeft[sortingKey];
+    const colRight =
+      rowRight[sortingKey] === null || rowRight[sortingKey] === undefined
+        ? -Infinity
+        : rowRight[sortingKey];
+    return {
+      colLeft,
+      colRight,
+    };
+  };
+
+  const internalSort = (rowLeft, rowRight) => {
+    let { colLeft, colRight } = pluckColumnToSort(rowLeft, rowRight);
+
+    const headerWithCustomSortFunction = headers.find(
+      (h) => h.key === sortingKey && !!h.sortFn
+    );
+    if (headerWithCustomSortFunction && headerWithCustomSortFunction.sortFn) {
+      return headerWithCustomSortFunction.sortFn(colLeft, colRight);
+    }
+    // No custom sort method for the header cell, so we continue with our own.
+    // Strings converted to lowercase; dollar currency etc. stripped (not yet i18n safe!)
+    colLeft =
+      typeof colLeft === "string"
+        ? colLeft.toLowerCase().replace(/(^\$|,)/g, "")
+        : colLeft;
+    colRight =
+      typeof colRight === "string"
+        ? colRight.toLowerCase().replace(/(^\$|,)/g, "")
+        : colRight;
+    // If raw value represents a number explicitly set to Number
+    colLeft = !Number.isNaN(Number(colLeft)) ? Number(colLeft) : colLeft;
+    colRight = !Number.isNaN(Number(colRight)) ? Number(colRight) : colRight;
+    if (colLeft > colRight) {
+      return 1;
+    }
+    if (colLeft < colRight) {
+      return -1;
+    }
+    return 0;
+  };
+
+  // Simply flips the sign of results of the ascending sort
+  const descendingSort = (row1, row2) => internalSort(row1, row2) * -1;
+
+  $: columns = filterByKey ? headers.labelByKey() : { ...headers };
+  // Reactive declaration: ...state needs to be computed from other parts; so
+  // direction is a dependency and when it changes, sortableItems gets recomputed
+  $: sortableItems =
+    direction === "ascending"
+      ? rows.sort(internalSort)
+      : direction === "descending"
+      ? rows.sort(descendingSort)
+      : (sortableItems = [...rows]);
+
+  $: visibleItems = sortableItems.slice(
+    offset ? offset : 0,
+    limit ? offset + limit : undefined
+  );
+
+  const handleSortClicked = (headerKey: string) => {
+    if (sortingKey !== headerKey) {
+      direction = "none";
+      sortingKey = headerKey;
+    }
+    switch (direction) {
+      case "ascending":
+        direction = "descending";
+        break;
+      case "descending":
+        direction = "none";
+        break;
+      case "none":
+        direction = "ascending";
+        break;
+      default:
+        console.warn(
+          "Table sorting only supports directions: ascending | descending | none"
+        );
+    }
+  };
+
+  const getSortingClassesFor = (headerKey, direction, sortingKey) => {
+    if (sortingKey === headerKey) {
+      return [
+        "icon-sort",
+        direction && direction !== "none" ? `icon-sort-${direction}` : "",
+      ]
+        .filter((klass) => klass.length)
+        .join(" ");
+    }
+    return "icon-sort";
+  };
+
+  const getSortDirectionFor = (headerKey, direction, sortingKey) => {
+    if (sortingKey !== headerKey) {
+      return "none";
+    } else {
+      return direction;
+    }
+  };
+
+  const tableResponsiveClasses = () => {
+    return [
+      !responsiveSize ? "table-responsive" : "",
+      responsiveSize ? `table-responsive-${responsiveSize}` : "",
+    ]
+      .filter((klass) => klass.length)
+      .join(" ");
+  };
+
+  const tableClasses = () => {
+    return [
+      "table",
+      tableSize ? `table-${tableSize}` : "",
+      isUppercasedHeaders ? "table-caps" : "",
+      isBordered ? "table-bordered" : "",
+      isBorderless ? "table-borderless" : "",
+      isStriped ? "table-striped" : "",
+      isHoverable ? "table-hoverable" : "",
+      isStacked ? "table-stacked" : "",
+    ]
+      .filter((klass) => klass.length)
+      .join(" ");
+  };
+
+  const captionClasses = () => {
+    return [
+      // .screenreader-only is expected to be globally available via common.min.css
+      captionPosition === "hidden" ? "screenreader-only" : "",
+      captionPosition !== "hidden" ? `caption-${captionPosition}` : "",
+    ]
+      .filter((klass) => klass.length)
+      .join(" ");
+  };
+
+  const getKeys = (row) => {
+    const filteredKeys = filterByKey
+      ? Object.keys(columns).map((key) => [key, key])
+      : Object.keys(row).map((key, index) => [key, index]);
+    return filteredKeys;
+  };
 </script>
  <div class="{tableResponsiveClasses()}">
   <table class="{tableClasses()}">

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

@@ -27,18 +27,30 @@
 	}
 </style>
 
-<script>import Button from "../Button/Button.svelte";
-export let isActive = false;
-export let ariaControls = "";
-export let disabled = false;
-export let role = "tab";
-let btn;
-export function focus() {
-  return btn.focus();
-}
-export function isDisabled() {
-  return btn.disabled;
-}
+<script lang="ts">
+	// You can leverage all the prebuilt AgnosticUI buttons
+	import Button from '../Button/Button.svelte';
+
+	/**
+	 * You must expose this prop for your tab buttons to get proper
+	 * aria-selected and to show an affordance of the selected tab.
+	 * See the .active class -- we're using an outline but you can
+	 * set that affordance up however you'd like.
+	 */
+	export let isActive = false;
+	export let ariaControls = '';
+	export let disabled = false;
+	export let role = 'tab';
+
+	// This is a component reference which we need to control the keyboard navigation
+	// in our tabs implementation. See: https://svelte.dev/tutorial/component-this
+	let btn;
+	export function focus() {
+		return btn.focus();
+	}
+	export function isDisabled() {
+		return btn.disabled;
+	}
 </script>
 
 <div class="buttonWrap {isActive ? 'active' : ''}">