@functionalcms/svelte-components 3.0.5 → 3.0.7

package/dist/components/form/Input.svelte

@@ -309,58 +309,87 @@ borders that visually conflict. */
 }
 
 </style>
-<script>export let label = "";
-export let id = "";
-export let labelCss = "";
-export let isLabelHidden = false;
-export let helpText = "";
-export let invalidText = "";
-export let hasLeftAddon = false;
-export let hasRightAddon = false;
-export let isInvalid = false;
-export let isInline = false;
-export let isRounded = false;
-export let isDisabled = void 0;
-export let css = "";
-export let isSkinned = true;
-export let isUnderlinedWithBackground = false;
-export let isUnderlined = false;
-export let size = "";
-export let type = "text";
-export let value = "";
-$: if (!value) value = "";
-$: inputType = type;
-$: labelClasses = [
-  "label",
-  isInvalid ? "label-error" : "",
-  isInline ? "label-inline" : "",
-  size ? `label-${size}` : "",
-  isLabelHidden ? "screenreader-only" : "",
-  labelCss ? labelCss : ""
-].filter((c) => c).join(" ");
-$: inputClasses = [
-  isSkinned ? "input" : "input-base",
-  isRounded ? "input-rounded" : "",
-  isUnderlined ? "input-underlined" : "",
-  hasLeftAddon ? "input-has-left-addon" : "",
-  hasRightAddon ? "input-has-right-addon" : "",
-  isDisabled ? "disabled" : "",
-  isInvalid ? "input-error" : "",
-  isInline ? "input-inline" : "",
-  isUnderlinedWithBackground ? "input-underlined-bg" : "",
-  css ? css : "",
-  size ? `input-${size}` : ""
-].filter((c) => c).join(" ");
-$: invalidClasses = () => {
-  return size ? `field-error-${size}` : "field-error";
-};
-$: helpClasses = () => {
-  return size ? `field-help-${size}` : "field-help";
-};
-$: addonContainerClasses = () => "input-addon-container";
-const handleInput = (e) => {
-  value = e.target.value;
-};
+<script lang="ts">
+  // Looks like the way to propogate boilerplate events is to
+  // just declare in template like on:blur on:focus and so on
+  // https://github.com/sveltejs/svelte/issues/585
+  // Looks like this is what smelte is doing:
+  // https://github.com/matyunya/smelte/blob/master/src/components/TextField/TextField.svelte
+  export let label = "";
+  export let id = "";
+  export let labelCss = "";
+  export let isLabelHidden = false;
+  export let helpText = "";
+  export let invalidText = "";
+  export let hasLeftAddon = false;
+  export let hasRightAddon = false;
+  export let isInvalid = false;
+  export let isInline = false;
+  export let isRounded = false;
+  export let isDisabled = undefined;
+  export let css = "";
+  export let isSkinned = true;
+  export let isUnderlinedWithBackground = false;
+  export let isUnderlined = false;
+  export let size: "small" | "large" | "" = "";
+  export let type:
+    | "text"
+    | "textarea"
+    | "email"
+    | "search"
+    | "password"
+    | "tel"
+    | "number"
+    | "url"
+    | "month"
+    | "time"
+    | "week"
+    | "date"
+    | "datetime-local"
+    | "color" = "text"; 
+
+  export let value = "";
+
+  $: if (!value) value = "";
+  $: inputType = type;
+
+  $: labelClasses = [
+      "label",
+      isInvalid ? "label-error" : "",
+      isInline ? "label-inline" : "",
+      size ? `label-${size}` : "",
+      isLabelHidden ? "screenreader-only" : "",
+    labelCss ? labelCss : "",
+  ].filter(c => c).join(" ");
+
+  $: inputClasses = [
+    isSkinned ? "input" : "input-base",
+    isRounded ? "input-rounded" : "",
+    isUnderlined ? "input-underlined" : "",
+    hasLeftAddon ? "input-has-left-addon" : "",
+    hasRightAddon ? "input-has-right-addon" : "",
+    isDisabled ? "disabled" : "",
+    isInvalid ? "input-error" : "",
+    isInline ? "input-inline" : "",
+    isUnderlinedWithBackground ? "input-underlined-bg" : "",
+    css ? css : "",
+    size ? `input-${size}` : "",
+  ].filter(c => c).join(" ");
+
+  $: invalidClasses = () => {
+    return size ? `field-error-${size}` : "field-error";
+  };
+  
+  $: helpClasses = () => {
+    return size ? `field-help-${size}` : "field-help";
+  };
+  
+  $: addonContainerClasses = () => "input-addon-container";
+
+  const handleInput = (e: Event) => {
+    value = (e.target as HTMLInputElement).value;
+  }
+
 </script>
 <div class="w-100">
   <label class={labelClasses} for={id}>{label}</label>

package/dist/components/form/Input.svelte.d.ts

@@ -18,8 +18,8 @@ declare const __propDef: {
         isSkinned?: boolean | undefined;
         isUnderlinedWithBackground?: boolean | undefined;
         isUnderlined?: boolean | undefined;
-        size?: ("small" | "large" | "") | undefined;
-        type?: ("text" | "textarea" | "email" | "search" | "password" | "tel" | "number" | "url" | "month" | "time" | "week" | "date" | "datetime-local" | "color") | undefined;
+        size?: "small" | "large" | "" | undefined;
+        type?: "text" | "textarea" | "email" | "search" | "password" | "tel" | "number" | "url" | "month" | "time" | "week" | "date" | "datetime-local" | "color" | undefined;
         value?: string | undefined;
     };
     events: {

package/dist/components/form/Select.svelte

@@ -80,30 +80,46 @@
 
 </style>
 
-<script>import { createEventDispatcher } from "svelte";
-export let uniqueId = "";
-export let name = "";
-export let labelCopy = "";
-export let options = [];
-export let size = "";
-export let multipleSize = 1;
-export let isMultiple = false;
-export let defaultOptionLabel = "Please select an option";
-export let isDisabled = false;
-export let isSkinned = true;
-export let css = "";
-export let singleSelected = "";
-export let multiSelected = [];
-const dispatch = createEventDispatcher();
-const changeHandler = () => {
-  dispatch("selected", isMultiple ? multiSelected : singleSelected);
-};
-$: disable = isDisabled;
-$: classes = [
-  isSkinned ? "select" : "select-base",
-  size ? `select-${size}` : "",
-  css ? `${css}` : ""
-].filter((cl) => cl).join(" ");
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let uniqueId = "";
+  export let name = "";
+  export let labelCopy = "";
+  export let options = [];
+  export let size: "small" | "large" | "" = "";
+  export let multipleSize = 1;
+  export let isMultiple = false;
+  export let defaultOptionLabel = "Please select an option";
+  export let isDisabled = false;
+  export let isSkinned = true;
+  export let css = "";
+
+  // singleSelected can be used for two-way bindings
+  export let singleSelected = "";
+
+  // If we don't make it seems Svelte gets confused:
+  // https://github.com/sveltejs/svelte/issues/5644
+  // And so we cannot share singleSelected above :(
+  export let multiSelected = [];
+
+  const dispatch = createEventDispatcher();
+  // This will emit an event object that has a event.detail prop
+  // This will contain the value of the selected option value. See
+  // https://svelte.dev/docs#createEventDispatcher
+  const changeHandler = () => {
+    dispatch("selected", isMultiple ? multiSelected : singleSelected);
+  };
+
+  $: disable = isDisabled;
+  $: classes = [
+    isSkinned ? "select" : "select-base",
+    size ? `select-${size}` : "",
+    css ? `${css}` : "",
+  ]
+    .filter((cl) => cl)
+    .join(" ");
+
 </script>
 
 <label class="screenreader-only" for={uniqueId}> {labelCopy} </label>

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,8 +1,11 @@
-<script>import { page } from "$app/stores";
-export let headerIsSticky = false;
-export let tracker = "";
-export let canonicalUrl = "";
-$: headerCss = headerIsSticky ? "sticky" : "";
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	export let headerIsSticky: boolean = false;
+	export let tracker: string = '';
+	export let canonicalUrl: string = '';
+
+	$: headerCss = headerIsSticky ? 'sticky' : '';
 </script>
 
 <svelte:head>

package/dist/components/layouts/Meta.svelte

@@ -1,9 +1,10 @@
-<script>export let title = "";
-export let description = "";
-export let keywords = "";
-export let robots = "index, follow";
-export let charset = "UTF-8";
-export let viewport = "width=device-width, initial-scale=1.0";
+<script lang="ts">
+    export let title = "";
+    export let description = "";
+    export let keywords = "";
+    export let robots = "index, follow";
+    export let charset = "UTF-8";
+    export let viewport = "width=device-width, initial-scale=1.0";
 </script>
 
 <svelte:head>

package/dist/components/layouts/SimpleFooter.svelte

@@ -5,9 +5,19 @@
     }
 </style>
 
-<script>export let companyName = "";
-export let motto = "";
-export let logoUrl;
+<script lang='ts'>
+    /**
+     * @type {string}
+     */
+    export let companyName = ""
+    /**
+     * @type {string}
+     */
+    export let motto = ""
+	/**
+	 * @type {string}
+	 */
+	 export let logoUrl: string
 </script>
 
 <aside class="items-center grid-flow-col">

package/dist/components/layouts/Tracker.svelte

@@ -1,4 +1,5 @@
-<script>export let domain;
+<script lang="ts">
+	export let domain;
 </script>
 
 <svelte:head>

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -1,7 +1,8 @@
 <style></style>
 
-<script>export let leftCss = "w50p";
-export let rightCss = "w50p";
+<script lang="ts">
+	export let leftCss: string = 'w50p'
+	export let rightCss: string = 'w50p'
 </script>
 
 <section class="flex flex-row-dynamic fw">

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,16 +1,21 @@
-<script>import { Orientation, Placement } from "../Styling.js";
-import ColumnMenu from "./NavigationItems.svelte";
-import { HeaderNavigationItem, defaultCss } from "./Menu.js";
-import { mergedClasses } from "../CssHelper.js";
-import Button from "../agnostic/Button/Button.svelte";
-export let css = defaultCss;
-export let contentPosition = Placement.End;
-export let orientation = Orientation.Column;
-export let localPages = [];
-const cssClasses = { ...defaultCss, ...css };
-$: expanded = false;
-$: showContentBeforeButton = contentPosition == Placement.Start;
-$: buttonCss = mergedClasses(cssClasses.buttonCss);
+<script lang="ts">
+	import { Orientation, Placement } from '../Styling.js';
+	import ColumnMenu from './NavigationItems.svelte';
+	import { HeaderNavigationItem, defaultCss } from './Menu.js';
+	import { mergedClasses } from '../CssHelper.js';
+	import Button from '../agnostic/Button/Button.svelte';
+
+	export let css: { buttonCss: string[]; container: string[]; link: string[] } = defaultCss;
+	export let contentPosition: Placement = Placement.End;
+	export let orientation: Orientation = Orientation.Column;
+
+	export let localPages: Array<HeaderNavigationItem> = [];
+
+	const cssClasses = { ...defaultCss, ...css };
+
+	$: expanded = false;
+	$: showContentBeforeButton = contentPosition == Placement.Start;
+	$: buttonCss = mergedClasses(cssClasses.buttonCss);
 </script>
 
 {#if expanded && showContentBeforeButton}

package/dist/components/menu/DynamicMenu.svelte

@@ -1,13 +1,19 @@
-<script>import { HeaderNavigationItem, selectVisible, defaultCss } from "./Menu.js";
-import { isAuthenticated } from "./authentication.js";
-import { page } from "$app/stores";
-import { mergedClasses } from "../CssHelper.js";
-export let css;
-const cssClasses = { ...defaultCss, ...css };
-export let localPages = [];
-$: pagesVisiblity = isAuthenticated($page);
-$: visibleNavItems = selectVisible(localPages, pagesVisiblity);
-const klasses = mergedClasses("flex", "flex-dynamic-row", cssClasses.container);
+<script lang="ts">
+	import { HeaderNavigationItem, selectVisible, defaultCss } from './Menu.js';
+	import { isAuthenticated } from './authentication.js';
+	import { page } from '$app/stores';
+	import { mergedClasses } from '../CssHelper.js';
+
+	export let css: { container: string[] } = { container: [] };
+
+	const cssClasses = {...defaultCss, ...css}
+
+	export let localPages: Array<HeaderNavigationItem> = [];
+
+	$: pagesVisiblity = isAuthenticated($page);
+	$: visibleNavItems = selectVisible(localPages, pagesVisiblity);
+
+	const klasses = mergedClasses('flex', 'flex-dynamic-row', cssClasses.container);
 </script>
 
 <nav class={klasses}>

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css: {
+        css?: {
             container: string[];
         };
         localPages?: Array<HeaderNavigationItem>;

package/dist/components/menu/HamburgerMenu.svelte

@@ -1,21 +1,27 @@
-<script>import { HeaderNavigationItem, defaultCss } from "./Menu.js";
-import { afterNavigate } from "$app/navigation";
-import { Orientation, Placement } from "../Styling.js";
-import ColumnMenu from "./NavigationItems.svelte";
-import { mergedClasses } from "../CssHelper.js";
-import Drawer from "../agnostic/Drawer/Drawer.svelte";
-import Button from "../agnostic/Button/Button.svelte";
-export let css = defaultCss;
-export let noBorder = false;
-export let placement = Placement.Start;
-export let localPages = [];
-const cssClasses = { ...defaultCss, ...css };
-let drawer = null;
-const assignDrawerRef = (ev) => {
-  drawer = ev.detail.instance;
-};
-afterNavigate(() => drawer?.hide());
-const buttonCss = mergedClasses("hamburger-handle", noBorder, cssClasses.buttonCss);
+<script lang="ts">
+	import { HeaderNavigationItem, defaultCss } from './Menu.js';
+	import { afterNavigate } from '$app/navigation';
+	import { Orientation, Placement } from '../Styling.js';
+	import ColumnMenu from './NavigationItems.svelte';
+	import { mergedClasses } from '../CssHelper.js';
+	import Drawer from '../agnostic/Drawer/Drawer.svelte';
+	import Button from '../agnostic/Button/Button.svelte';
+
+	export let css: { buttonCss: string[]; container: string[]; link: string[] } = defaultCss;
+
+	export let noBorder: boolean = false;
+	export let placement: Placement = Placement.Start;
+	export let localPages: Array<HeaderNavigationItem> = [];
+
+	const cssClasses = { ...defaultCss, ...css };
+
+	let drawer: any = null;
+	const assignDrawerRef = (ev: any) => {
+		drawer = ev.detail.instance;
+	};
+	afterNavigate(() => drawer?.hide());
+
+	const buttonCss = mergedClasses('hamburger-handle', noBorder, cssClasses.buttonCss);
 </script>
 
 <Button