@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/js/utils.js

@@ -1,133 +1,133 @@
-import parse from "parse-color";
-
-const randomString = () => {
-	return Math.random().toString(16).slice(2, 8);
-};
-
-export const slugify = (str, suffix = false) =>
-	typeof str === "string"
-		? str
-				.toString()
-				.normalize("NFD")
-				.replace(/[\u0300-\u036f]/g, "")
-				.toLowerCase()
-				.trim()
-				.replace(/\s+/g, "-")
-				.replace(/[^\w-]+/g, "")
-				.replace(/--+/g, "-")
-				.concat(suffix ? `-${randomString()}` : "")
-		: randomString();
-
-export const isNumeric = (val) => isFinite(val) && val !== null;
-
-export const validDate = (str) => {
-	if (!str) return false;
-	const date = new Date(str);
-	// @ts-ignore
-	return !isNaN(date);
-};
-
-export const formatDate = (
-	str,
-	locale = "en-GB",
-	opts = { year: "numeric", month: "long", day: "2-digit" }
-) => {
-	const date = new Date(str);
-	// @ts-ignore
-	return date.toLocaleDateString(locale, opts);
-};
-
-export const format = (val, dp = null) => {
-	return Number.isInteger(dp)
-		? val.toLocaleString("en-GB", {
-				minimumFractionDigits: dp,
-				maximumFractionDigits: dp
-			})
-		: val.toLocaleString("en-GB");
-};
-
-export const formatter = (dp = null) => {
-	return Number.isInteger(dp)
-		? new Intl.NumberFormat("en-GB", {
-				minimumFractionDigits: dp,
-				maximumFractionDigits: dp
-			}).format
-		: new Intl.NumberFormat("en-GB").format;
-};
-
-// Functions for natural sorting, regardless of type
-// Less performant than d3.ascending and d3.descending, but handles mixed types
-const collator = new Intl.Collator("en", { numeric: true });
-const isSortable = (a, b) =>
-	typeof a === typeof b &&
-	(["number", "string", "boolean"].includes(typeof a) ||
-		(typeof a.getMonth === "function" && typeof b.getMonth === "function"));
-
-export const ascending = (a, b) =>
-	a === b
-		? 0
-		: a == null
-			? 1
-			: b == null
-				? -1
-				: !isSortable(a, b)
-					? collator.compare(a, b)
-					: a < b
-						? -1
-						: a > b
-							? 1
-							: 0;
-
-export const descending = (a, b) =>
-	a === b
-		? 0
-		: a == null
-			? 1
-			: b == null
-				? -1
-				: !isSortable(a, b)
-					? collator.compare(b, a)
-					: b < a
-						? -1
-						: b > a
-							? 1
-							: 0;
-
-export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
-
-export const contrastColor = (color) => {
-	if (!color || typeof color !== "string") return "black";
-	const rgb = parse(color).rgb;
-	if (rgb) {
-		const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-		return brightness > 125 ? "black" : "white";
-	}
-	return "black";
-};
-
-export const darkenColor = (color, factor = 0.5) => {
-	if (!color || typeof color !== "string") return color;
-	const hsl = parse(color).hsl;
-	if (hsl) {
-		hsl[2] = hsl[2] * factor;
-		return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
-	}
-	return color;
-};
-
-export const lipsum = (sentences = 4, offset = 0) => {
-	const texts = [
-		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-		"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-		"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
-		"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-	];
-	const passage = [];
-	for (let i = 0; i < sentences; i++) {
-		passage.push(texts[(i + offset) % 4]);
-	}
-	return passage.join(" ");
-};
-
-export const matchMedia = (query) => window.matchMedia(query);
-matchMedia.hasMatchMedia = () => typeof window.matchMedia === "function";
+import parse from "parse-color";
+
+const randomString = () => {
+	return Math.random().toString(16).slice(2, 8);
+};
+
+export const slugify = (str, suffix = false) =>
+	typeof str === "string"
+		? str
+				.toString()
+				.normalize("NFD")
+				.replace(/[\u0300-\u036f]/g, "")
+				.toLowerCase()
+				.trim()
+				.replace(/\s+/g, "-")
+				.replace(/[^\w-]+/g, "")
+				.replace(/--+/g, "-")
+				.concat(suffix ? `-${randomString()}` : "")
+		: randomString();
+
+export const isNumeric = (val) => isFinite(val) && val !== null;
+
+export const validDate = (str) => {
+	if (!str) return false;
+	const date = new Date(str);
+	// @ts-ignore
+	return !isNaN(date);
+};
+
+export const formatDate = (
+	str,
+	locale = "en-GB",
+	opts = { year: "numeric", month: "long", day: "2-digit" }
+) => {
+	const date = new Date(str);
+	// @ts-ignore
+	return date.toLocaleDateString(locale, opts);
+};
+
+export const format = (val, dp = null) => {
+	return Number.isInteger(dp)
+		? val.toLocaleString("en-GB", {
+				minimumFractionDigits: dp,
+				maximumFractionDigits: dp
+			})
+		: val.toLocaleString("en-GB");
+};
+
+export const formatter = (dp = null) => {
+	return Number.isInteger(dp)
+		? new Intl.NumberFormat("en-GB", {
+				minimumFractionDigits: dp,
+				maximumFractionDigits: dp
+			}).format
+		: new Intl.NumberFormat("en-GB").format;
+};
+
+// Functions for natural sorting, regardless of type
+// Less performant than d3.ascending and d3.descending, but handles mixed types
+const collator = new Intl.Collator("en", { numeric: true });
+const isSortable = (a, b) =>
+	typeof a === typeof b &&
+	(["number", "string", "boolean"].includes(typeof a) ||
+		(typeof a.getMonth === "function" && typeof b.getMonth === "function"));
+
+export const ascending = (a, b) =>
+	a === b
+		? 0
+		: a == null
+			? 1
+			: b == null
+				? -1
+				: !isSortable(a, b)
+					? collator.compare(a, b)
+					: a < b
+						? -1
+						: a > b
+							? 1
+							: 0;
+
+export const descending = (a, b) =>
+	a === b
+		? 0
+		: a == null
+			? 1
+			: b == null
+				? -1
+				: !isSortable(a, b)
+					? collator.compare(b, a)
+					: b < a
+						? -1
+						: b > a
+							? 1
+							: 0;
+
+export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const contrastColor = (color) => {
+	if (!color || typeof color !== "string") return "black";
+	const rgb = parse(color).rgb;
+	if (rgb) {
+		const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+		return brightness > 125 ? "black" : "white";
+	}
+	return "black";
+};
+
+export const darkenColor = (color, factor = 0.5) => {
+	if (!color || typeof color !== "string") return color;
+	const hsl = parse(color).hsl;
+	if (hsl) {
+		hsl[2] = hsl[2] * factor;
+		return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
+	}
+	return color;
+};
+
+export const lipsum = (sentences = 4, offset = 0) => {
+	const texts = [
+		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+		"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+		"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+		"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+	];
+	const passage = [];
+	for (let i = 0; i < sentences; i++) {
+		passage.push(texts[(i + offset) % 4]);
+	}
+	return passage.join(" ");
+};
+
+export const matchMedia = (query) => window.matchMedia(query);
+matchMedia.hasMatchMedia = () => typeof window.matchMedia === "function";

package/dist/js/withParams.js

@@ -1,43 +1,43 @@
-/**
- * Use custom source code in the "Show code" pull down.
- * @param {object} source Source code object, where key is the language of the source code and value is the code string.
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs
- * @returns props object including parameters
- */
-export const withSource = (source, otherOptions = {}) => {
-	const language = Object.keys(source)[0];
-	const code = source[language];
-	const docs = {
-		...otherOptions?.parameters?.docs,
-		source: { code, language }
-	};
-	return { docs };
-};
-
-/**
- * Add custom documentation to a story.
- * @param {string} storyDocs Markdown string of docs
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
- * @returns props object including parameters
- */
-export const withStoryDocs = (storyDocs, otherOptions = {}) => {
-	const docs = {
-		...otherOptions?.parameters?.docs,
-		description: { story: storyDocs }
-	};
-	return { docs };
-};
-
-/**
- * Add custom documentation to the top of the component docs page.
- * @param {string} componentDocs Markdown string of docs
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
- * @returns props object including parameters
- */
-export const withComponentDocs = (componentDocs, otherOptions = {}) => {
-	const docs = {
-		...otherOptions?.parameters?.docs,
-		description: { component: componentDocs }
-	};
-	return { docs };
-};
+/**
+ * Use custom source code in the "Show code" pull down.
+ * @param {object} source Source code object, where key is the language of the source code and value is the code string.
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs
+ * @returns props object including parameters
+ */
+export const withSource = (source, otherOptions = {}) => {
+	const language = Object.keys(source)[0];
+	const code = source[language];
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		source: { code, language }
+	};
+	return { docs };
+};
+
+/**
+ * Add custom documentation to a story.
+ * @param {string} storyDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withStoryDocs = (storyDocs, otherOptions = {}) => {
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		description: { story: storyDocs }
+	};
+	return { docs };
+};
+
+/**
+ * Add custom documentation to the top of the component docs page.
+ * @param {string} componentDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withComponentDocs = (componentDocs, otherOptions = {}) => {
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		description: { component: componentDocs }
+	};
+	return { docs };
+};

package/dist/layout/Accordion/Accordion.stories.svelte

@@ -1,30 +1,30 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Accordion from "./Accordion.svelte";
-	import AccordionItem from "./AccordionItem.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Accordion",
-		component: Accordion,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Accordion {...args}>
-		<AccordionItem title="First item">
-			<p>Contents of first item.</p>
-		</AccordionItem>
-		<AccordionItem title="Second item">
-			<p>Contents of second item.</p>
-		</AccordionItem>
-	</Accordion>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="With 'show all' toggle" args={{ showToggle: true }} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Accordion from "./Accordion.svelte";
+	import AccordionItem from "./AccordionItem.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Accordion",
+		component: Accordion,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Accordion {...args}>
+		<AccordionItem title="First item">
+			<p>Contents of first item.</p>
+		</AccordionItem>
+		<AccordionItem title="Second item">
+			<p>Contents of second item.</p>
+		</AccordionItem>
+	</Accordion>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="With 'show all' toggle" args={{ showToggle: true }} {template} />

package/dist/layout/Accordion/Accordion.svelte

@@ -1,55 +1,55 @@
-<script>
-	import { onMount, setContext } from "svelte";
-	import Accordion from "./accordion.js";
-	import Details from "./details.js";
-	import { slugify, sleep } from "../../js/utils.js";
-
-	/**
-	 * Optional: Set the unique ID of the accordion
-	 * @type {string}
-	 */
-	export let id = slugify();
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Option to include a "show all" toggle above the accordion
-	 * @type {boolean}
-	 */
-	export let showToggle = false;
-
-	let el, buttonEl;
-
-	setContext("dataGroup", id);
-
-	onMount(async () => {
-		await sleep(0);
-		const detailsComponents = [...el.querySelectorAll(".ons-js-details")];
-		const detailsEls = detailsComponents.map((element) => new Details(element));
-		new Accordion(buttonEl, detailsEls);
-	});
-</script>
-
-<div {id} class="ons-accordion {cls}" bind:this={el}>
-	<button
-		type="button"
-		class="ons-btn ons-accordion__toggle-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small"
-		class:hide-toggle={!showToggle}
-		data-close-all="Hide all"
-		data-group={id}
-		bind:this={buttonEl}
-	>
-		<span class="ons-btn__inner ons-accordion__toggle-all-inner"
-			><span class="ons-btn__text">Show all</span></span
-		>
-	</button>
-	<slot />
-</div>
-
-<style>
-	button.hide-toggle {
-		display: none;
-	}
-</style>
+<script>
+	import { onMount, setContext } from "svelte";
+	import Accordion from "./accordion.js";
+	import Details from "./details.js";
+	import { slugify, sleep } from "../../js/utils.js";
+
+	/**
+	 * Optional: Set the unique ID of the accordion
+	 * @type {string}
+	 */
+	export let id = slugify();
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Option to include a "show all" toggle above the accordion
+	 * @type {boolean}
+	 */
+	export let showToggle = false;
+
+	let el, buttonEl;
+
+	setContext("dataGroup", id);
+
+	onMount(async () => {
+		await sleep(0);
+		const detailsComponents = [...el.querySelectorAll(".ons-js-details")];
+		const detailsEls = detailsComponents.map((element) => new Details(element));
+		new Accordion(buttonEl, detailsEls);
+	});
+</script>
+
+<div {id} class="ons-accordion {cls}" bind:this={el}>
+	<button
+		type="button"
+		class="ons-btn ons-accordion__toggle-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small"
+		class:hide-toggle={!showToggle}
+		data-close-all="Hide all"
+		data-group={id}
+		bind:this={buttonEl}
+	>
+		<span class="ons-btn__inner ons-accordion__toggle-all-inner"
+			><span class="ons-btn__text">Show all</span></span
+		>
+	</button>
+	<slot />
+</div>
+
+<style>
+	button.hide-toggle {
+		display: none;
+	}
+</style>

package/dist/layout/Accordion/AccordionItem.svelte

@@ -1,51 +1,51 @@
-<script>
-	import { getContext } from "svelte";
-	import { slugify } from "../../js/utils.js";
-
-	/**
-	 * Sets the title of the accordion item
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Sets the unique ID of the accordion item
-	 * @type {string}
-	 */
-	export let id = slugify(title);
-	/**
-	 * Set the heading level for the accordion items
-	 * @type {"h2"|"h3"}
-	 */
-	export let headingTag = "h2";
-
-	const dataGroup = getContext("dataGroup");
-</script>
-
-<div {id} class="ons-details ons-js-details ons-details--accordion" data-group={dataGroup}>
-	<div class="ons-details__heading ons-js-details-heading" role="button">
-		{#if headingTag === "h3"}
-			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
-		{:else}
-			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
-		{/if}
-		<span class="ons-details__icon">
-			<svg
-				class="ons-icon"
-				viewBox="0 0 8 13"
-				xmlns="http://www.w3.org/2000/svg"
-				focusable="false"
-				fill="currentColor"
-				role="img"
-				title="ons-icon-chevron"
-			>
-				<path
-					d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
-					transform="translate(-5.02 -1.59)"
-				/>
-			</svg></span
-		>
-	</div>
-	<div id="{id}-content" class="ons-details__content ons-js-details-content">
-		<slot />
-	</div>
-</div>
+<script>
+	import { getContext } from "svelte";
+	import { slugify } from "../../js/utils.js";
+
+	/**
+	 * Sets the title of the accordion item
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Sets the unique ID of the accordion item
+	 * @type {string}
+	 */
+	export let id = slugify(title);
+	/**
+	 * Set the heading level for the accordion items
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+
+	const dataGroup = getContext("dataGroup");
+</script>
+
+<div {id} class="ons-details ons-js-details ons-details--accordion" data-group={dataGroup}>
+	<div class="ons-details__heading ons-js-details-heading" role="button">
+		{#if headingTag === "h3"}
+			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
+		{:else}
+			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
+		{/if}
+		<span class="ons-details__icon">
+			<svg
+				class="ons-icon"
+				viewBox="0 0 8 13"
+				xmlns="http://www.w3.org/2000/svg"
+				focusable="false"
+				fill="currentColor"
+				role="img"
+				title="ons-icon-chevron"
+			>
+				<path
+					d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+					transform="translate(-5.02 -1.59)"
+				/>
+			</svg></span
+		>
+	</div>
+	<div id="{id}-content" class="ons-details__content ons-js-details-content">
+		<slot />
+	</div>
+</div>