@functionalcms/svelte-components 2.29.0 → 2.33.0

package/dist/components/files/utils.js

@@ -0,0 +1,146 @@
+import accepts from "./attr-accept";
+
+// Error codes
+export const FILE_INVALID_TYPE = "file-invalid-type";
+export const FILE_TOO_LARGE = "file-too-large";
+export const FILE_TOO_SMALL = "file-too-small";
+export const TOO_MANY_FILES = "too-many-files";
+
+// File Errors
+export const getInvalidTypeRejectionErr = (accept) => {
+  accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
+  const messageSuffix = Array.isArray(accept)
+    ? `one of ${accept.join(", ")}`
+    : accept;
+  return {
+    code: FILE_INVALID_TYPE,
+    message: `File type must be ${messageSuffix}`,
+  };
+};
+
+export const getTooLargeRejectionErr = (maxSize) => {
+  return {
+    code: FILE_TOO_LARGE,
+    message: `File is larger than ${maxSize} bytes`,
+  };
+};
+
+export const getTooSmallRejectionErr = (minSize) => {
+  return {
+    code: FILE_TOO_SMALL,
+    message: `File is smaller than ${minSize} bytes`,
+  };
+};
+
+export const TOO_MANY_FILES_REJECTION = {
+  code: TOO_MANY_FILES,
+  message: "Too many files",
+};
+
+// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
+// that MIME type will always be accepted
+export function fileAccepted(file, accept) {
+  const isAcceptable =
+    file.type === "application/x-moz-file" || accepts(file, accept);
+  return [
+    isAcceptable,
+    isAcceptable ? null : getInvalidTypeRejectionErr(accept),
+  ];
+}
+
+export function fileMatchSize(file, minSize, maxSize) {
+  if (isDefined(file.size)) {
+    if (isDefined(minSize) && isDefined(maxSize)) {
+      if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
+      if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
+    } else if (isDefined(minSize) && file.size < minSize)
+      return [false, getTooSmallRejectionErr(minSize)];
+    else if (isDefined(maxSize) && file.size > maxSize)
+      return [false, getTooLargeRejectionErr(maxSize)];
+  }
+  return [true, null];
+}
+
+function isDefined(value) {
+  return value !== undefined && value !== null;
+}
+
+export function allFilesAccepted({
+  files,
+  accept,
+  minSize,
+  maxSize,
+  multiple,
+}) {
+  if (!multiple && files.length > 1) {
+    return false;
+  }
+
+  return files.every((file) => {
+    const [accepted] = fileAccepted(file, accept);
+    const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
+    return accepted && sizeMatch;
+  });
+}
+
+// React's synthetic events has event.isPropagationStopped,
+// but to remain compatibility with other libs (Preact) fall back
+// to check event.cancelBubble
+export function isPropagationStopped(event) {
+  if (typeof event.isPropagationStopped === "function") {
+    return event.isPropagationStopped();
+  } else if (typeof event.cancelBubble !== "undefined") {
+    return event.cancelBubble;
+  }
+  return false;
+}
+
+export function isEvtWithFiles(event) {
+  if (!event.dataTransfer) {
+    return !!event.target && !!event.target.files;
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
+  return Array.prototype.some.call(
+    event.dataTransfer.types,
+    (type) => type === "Files" || type === "application/x-moz-file"
+  );
+}
+
+export function isKindFile(item) {
+  return typeof item === "object" && item !== null && item.kind === "file";
+}
+
+function isIe(userAgent) {
+  return (
+    userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1
+  );
+}
+
+function isEdge(userAgent) {
+  return userAgent.indexOf("Edge/") !== -1;
+}
+
+export function isIeOrEdge(userAgent = window.navigator.userAgent) {
+  return isIe(userAgent) || isEdge(userAgent);
+}
+
+/**
+ * This is intended to be used to compose event handlers
+ * They are executed in order until one of them calls `event.isPropagationStopped()`.
+ * Note that the check is done on the first invoke too,
+ * meaning that if propagation was stopped before invoking the fns,
+ * no handlers will be executed.
+ *
+ * @param {Function} fns the event hanlder functions
+ * @return {Function} the event handler to add to an element
+ */
+export function composeEventHandlers(...fns) {
+  return (event, ...args) =>
+    fns.some((fn) => {
+      if (!isPropagationStopped(event) && fn) {
+        fn(event, ...args);
+      }
+      return isPropagationStopped(event);
+    });
+}

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,6 +1,6 @@
 <style>
 	:global(.sticky) {
-    	background-color: var( --agnostic-light-modelight);
+    	background-color: var( --functional-light-modelight);
 	}
 	footer.sticky {
 		flex-shrink: 0;

package/dist/components/menu/CollapsibleMenu.svelte

@@ -9,20 +9,22 @@ export let orientation = Orientation.Column;
 export let localPages = [];
 $: showContent = false;
 $: showContentBeforeButton = contentPosition == Placement.Start;
-const contentKlasses = [contentCss].filter((c) => c).join(" ");
 </script>
 
 {#if showContent && showContentBeforeButton}
-	<ColumnMenu {localPages} {orientation} css={contentKlasses} />
+	<ColumnMenu {localPages} {orientation} css={contentCss} />
 {/if}
-
-<Button css={buttonCss} on:click={() => (showContent = !showContent)}>
-	<slot name="handle">&#9776;</slot>
-</Button>
-
+<div>
+	<Button css={buttonCss} on:click={() => (showContent = !showContent)}>
+		<slot name="handle">&#9776;</slot>
+	</Button>
+</div>
 {#if showContent && !showContentBeforeButton}
-	<ColumnMenu {localPages} {orientation} css={contentKlasses} />
+	<ColumnMenu {localPages} {orientation} css={contentCss} />
 {/if}
 
 <style>
+	div {
+		margin: var(--fluid-8);
+	}
 </style>

package/dist/components/menu/CollapsibleMenu.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { Orientation, Placement } from "../Styling.js";
-import { HeaderNavigationItem } from "./Menu.js";
+import { Orientation, Placement } from '../Styling.js';
+import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
         buttonCss?: string;

package/dist/components/menu/ColumnMenu.svelte

@@ -18,9 +18,6 @@ const klasses = ["flex", orientation, css ? css : ""].filter((c) => c).join(" ")
 			<Link href={pageItem.path} css={linkCss}>
 				{pageItem.name}
 			</Link>
-			<!-- <a on:click={pageItem.action} href={pageItem.path}>
-				{pageItem.name}
-			</a> -->
 		</li>
 	{/each}
 </ul>
@@ -42,7 +39,7 @@ const klasses = ["flex", orientation, css ? css : ""].filter((c) => c).join(" ")
 		border-right: var(--functional-menu-item-border-right);
 		border-bottom: var(--functional-menu-item-border-bottom);
 		border-left: var(--functional-menu-item-border-left);
-		border-radius: var(--functional-menu-item-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-radius, var(--functional-radius));
 		text-decoration: none;
 		display: block;
 	}
@@ -55,7 +52,7 @@ const klasses = ["flex", orientation, css ? css : ""].filter((c) => c).join(" ")
 		border-right: var(--functional-menu-item-hover-border-right);
 		border-bottom: var(--functional-menu-item-hover-border-bottom);
 		border-left: var(--functional-menu-item-hover-border-left);
-		border-radius: var(--functional-menu-item-hover-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-hover-radius, var(--functional-radius));
 	}
 	li[aria-current='true'] a {
 		color: var(--functional-menu-item-selected-color);
@@ -66,6 +63,6 @@ const klasses = ["flex", orientation, css ? css : ""].filter((c) => c).join(" ")
 		border-right: var(--functional-menu-item-selected-border-right);
 		border-bottom: var(--functional-menu-item-selected-border-bottom);
 		border-left: var(--functional-menu-item-selected-border-left);
-		border-radius: var(--functional-menu-item-selected-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-selected-radius, var(--functional-radius));
 	}
 </style>

package/dist/components/menu/FlatMenu.svelte

@@ -35,7 +35,7 @@ const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).jo
 		border-right: var(--functional-menu-item-border-right);
 		border-bottom: var(--functional-menu-item-border-bottom);
 		border-left: var(--functional-menu-item-border-left);
-		border-radius: var(--functional-menu-item-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-radius, var(--functional-radius));
 		text-decoration: none;
 		display: block;
 	}
@@ -48,7 +48,7 @@ const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).jo
 		border-right: var(--functional-menu-item-hover-border-right);
 		border-bottom: var(--functional-menu-item-hover-border-bottom);
 		border-left: var(--functional-menu-item-hover-border-left);
-		border-radius: var(--functional-menu-item-hover-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-hover-radius, var(--functional-radius));
 	}
 	li[aria-current='true'] a {
 		color: var(--functional-menu-item-selected-color);
@@ -59,7 +59,7 @@ const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).jo
 		border-right: var(--functional-menu-item-selected-border-right);
 		border-bottom: var(--functional-menu-item-selected-border-bottom);
 		border-left: var(--functional-menu-item-selected-border-left);
-		border-radius: var(--functional-menu-item-selected-radius, var(--agnostic-radius));
+		border-radius: var(--functional-menu-item-selected-radius, var(--functional-radius));
 	}
 	@media (min-width: 960px) {
 	}

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
 export { default as Carusel } from './components/presentation/Carusel.svelte';
 export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as DropZone } from './components/files/Dropzone.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
 export type { BlogPost } from './components/blog/BlogPost.js';

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
 export { default as Carusel } from './components/presentation/Carusel.svelte';
 export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as DropZone } from './components/files/Dropzone.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
 export { importPost, listAllPosts } from './components/blog/blog.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.29.0",
+	"version": "2.33.0",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -12,7 +12,7 @@
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build-css": "sass ./src/lib/css/properties.scss ./css/functional.css",
+		"build-css": "sass ./src/lib/css/functional.scss ./css/functional.css --style compressed",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "npm run build-css && svelte-kit sync && svelte-package && publint",