@onsvisual/svelte-components 1.0.32 → 1.0.34

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name for the <select> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A label to describe the <select> element (expected for accessibility)
 	 * @type {string|null}
@@ -46,7 +51,7 @@
 	{/if}
 	<select
 		{id}
-		name={id}
+		{name}
 		class="ons-input ons-input--select"
 		bind:value
 		on:change={(e) => dispatch("change", e)}

package/dist/inputs/Dropdown/Dropdown.svelte.d.ts

@@ -5,6 +5,7 @@ export default class Dropdown extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     id?: string | null | undefined;
     label?: string | null | undefined;
+    name?: string | null | undefined;
     value?: object | null | undefined;
     hideLabel?: boolean | undefined;
     placeholder?: string | undefined;
@@ -24,6 +25,7 @@ declare const __propDef: {
         cls?: string | null | undefined;
         id?: string | null | undefined;
         label?: string | null | undefined;
+        name?: string | null | undefined;
         value?: object | null | undefined;
         hideLabel?: boolean | undefined;
         placeholder?: string | undefined;

package/dist/inputs/Input/Input.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name attribute for <input> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A prop to bind to for the entered value
 	 * @type {string|null}
@@ -103,6 +108,7 @@
 				<input
 					type="text"
 					{id}
+					{name}
 					bind:value
 					maxlength={charLimit}
 					pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
@@ -129,6 +135,7 @@
 		<input
 			type="text"
 			{id}
+			{name}
 			bind:value
 			pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
 			inputmode={numeric ? "numeric" : null}

package/dist/inputs/Input/Input.svelte.d.ts

@@ -7,6 +7,7 @@ export default class Input extends SvelteComponentTyped<{
     width?: number | undefined;
     label?: string | undefined;
     pattern?: string | null | undefined;
+    name?: string | null | undefined;
     error?: boolean | undefined;
     numeric?: boolean | undefined;
     value?: string | null | undefined;
@@ -34,6 +35,7 @@ declare const __propDef: {
         width?: number | undefined;
         label?: string | undefined;
         pattern?: string | null | undefined;
+        name?: string | null | undefined;
         error?: boolean | undefined;
         numeric?: boolean | undefined;
         value?: string | null | undefined;

package/dist/inputs/Radios/Radio.svelte

@@ -24,7 +24,7 @@
 	 */
 	export let item = { id, label, description };
 	/**
-	 * ID for radio group (required)
+	 * ID/name for radio group (required)
 	 * @type {string}
 	 */
 	export let groupId;

package/dist/inputs/Radios/Radios.svelte

@@ -12,10 +12,10 @@
 	 */
 	export let hideTitle = false;
 	/**
-	 * Unique ID for radio group (required)
+	 * Unique ID/name for radio group (required)
 	 * @type {string}
 	 */
-	export let id = "name";
+	export let id = "radios";
 	/**
 	 * Descriptive "how to" label for inputs
 	 * @type {string|null}

package/dist/inputs/Select/Select.svelte

@@ -16,10 +16,15 @@
 	let hideMenu = false;
 
 	/**
-	 * Unique id for the element
+	 * Unique id for the HTML element
 	 * @type {string}
 	 */
 	export let id = "autocomplete";
+	/**
+	 * Name for the HTML element
+	 * @type {string}
+	 */
+	export let name = id;
 	/**
 	 * The mode can be either "default" or "search"
 	 * @type {"default"|"search"}
@@ -173,7 +178,7 @@
 		accessibleAutocomplete({
 			element,
 			id,
-			name: `${id}-input`,
+			name,
 			source: loadOptions,
 			autoselect: true,
 			onConfirm: select,
@@ -212,9 +217,9 @@
 
 {#if renderFallback && !scriptLoaded}
 	{#if mode === "search"}
-		<Input {id} {label} {hideLabel} value={value?.[labelKey]} />
+		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} />
 	{:else}
-		<Dropdown {id} {options} {label} {hideLabel} {placeholder} {value} />
+		<Dropdown {id} {name} {options} {label} {hideLabel} {placeholder} {value} />
 	{/if}
 {:else}
 	<div class="ons-field {cls}">

package/dist/inputs/Select/Select.svelte.d.ts

@@ -5,6 +5,7 @@ export default class Select extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     id?: string | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     mode?: "default" | "search" | undefined;
     value?: object | undefined;
     hideLabel?: boolean | undefined;
@@ -35,6 +36,7 @@ declare const __propDef: {
         cls?: string | null | undefined;
         id?: string | undefined;
         label?: string | undefined;
+        name?: string | undefined;
         mode?: "default" | "search" | undefined;
         value?: object | undefined;
         hideLabel?: boolean | undefined;

package/dist/inputs/Textarea/Textarea.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name for <textarea> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A prop to bind to for the entered value
 	 * @type {string|null}
@@ -68,11 +73,11 @@
 	{/if}
 	<textarea
 		{id}
+		{name}
 		bind:value
 		class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
 		class:ons-js-char-limit-input={charLimit}
 		class:ons-input--limit-reached={remaining === 0}
-		name={id}
 		{rows}
 		maxlength={charLimit}
 		data-char-limit-ref="{id}-lim"

package/dist/inputs/Textarea/Textarea.svelte.d.ts

@@ -6,6 +6,7 @@ export default class Textarea extends SvelteComponentTyped<{
     id?: string | null | undefined;
     width?: number | undefined;
     label?: string | undefined;
+    name?: string | null | undefined;
     value?: string | null | undefined;
     description?: string | null | undefined;
     hideLabel?: boolean | undefined;
@@ -25,6 +26,7 @@ declare const __propDef: {
         id?: string | null | undefined;
         width?: number | undefined;
         label?: string | undefined;
+        name?: string | null | undefined;
         value?: string | null | undefined;
         description?: string | null | undefined;
         hideLabel?: boolean | undefined;

package/dist/layout/DocumentList/DocumentList.stories.svelte

@@ -49,12 +49,27 @@
 				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
 		}
 	];
+
+	const items3 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			meta: "Poster, PDF, 499KB, 1 page"
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages"
+		}
+	];
 </script>
 
 <Story name="Document list with images" args={{ items: items1 }} />
 
 <Story name="Article list with featured item" args={{ items: items2 }} />
 
+<Story name="Compact list, no description" args={{ items: items3, compact: true }} />
+
 <Story name="Individually defined documents" asChild parameters={withStoryDocs(exampleDocs)}>
 	<DocumentList>
 		<Document

package/dist/layout/DocumentList/DocumentList.svelte

@@ -5,6 +5,10 @@
 	 * @type {object[]|null}
 	 */
 	export let items = null;
+	/** Compact mode. Removes horizonatal lines between documents
+	 * @type {boolean}
+	 */
+	export let compact = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -12,7 +16,7 @@
 	export let cls = null;
 </script>
 
-<ul class="ons-document-list {cls}">
+<ul class="ons-document-list {cls}" class:ons-document-list--compact={compact}>
 	<slot />
 	{#if Array.isArray(items)}
 		{#each items as item}
@@ -20,3 +24,10 @@
 		{/each}
 	{/if}
 </ul>
+
+<style>
+	.ons-document-list--compact > :global(.ons-document-list__item) {
+		padding-bottom: 0;
+		border: none;
+	}
+</style>

package/dist/layout/DocumentList/DocumentList.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DocumentListSlots */
 export default class DocumentList extends SvelteComponentTyped<{
     cls?: string | null | undefined;
+    compact?: boolean | undefined;
     items?: object[] | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,6 +18,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         cls?: string | null | undefined;
+        compact?: boolean | undefined;
         items?: object[] | null | undefined;
     };
     events: {

package/dist/layout/Hero/Hero.svelte

@@ -340,7 +340,9 @@
 						</svg>
 					</div>
 				{/if}
-				<DescriptionList items={meta || []} mode="inline" />
+				{#if Array.isArray(meta)}
+					<DescriptionList items={meta} mode="inline" />
+				{/if}
 				<slot name="after" />
 			</div>
 		</Container>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.32",
+	"version": "1.0.34",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",