@functionalcms/svelte-components 4.10.27 → 4.10.29

package/dist/components/form/ChoiceInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
+	import { Orientation } from '../Styling.js';
 	import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 
 	interface Props {
@@ -15,6 +16,7 @@
 		label: string;
 		size: ChoiceInputSize;
 		checked: string[];
+		orientation: Orientation;
 	}
 
 	let {
@@ -36,6 +38,7 @@
 		size = '',
 		// Provides bind:checked capabilities that consumer can use
 		checked = $bindable([]),
+		orientation = Orientation.DynamicRow,
 		...restProps
 	}: Partial<Props & HtmlParts> = $props();
 
@@ -99,36 +102,38 @@
 <div class="w-100">
 	<fieldset class={fieldsetClasses}>
 		<legend class={legendClasses}>{label}</legend>
-		{#each options as { value, label }, index}
-			<label
-				class={labelClasses}
-				class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
-			>
-				<input
-					class={inputClasses}
-					id="{id}-{name}-{index}"
-					{type}
-					{name}
-					{value}
-					disabled={isDisabled || disabledOptions.includes(value)}
-					checked={checkedOptions.includes(value)}
-					onchange={onChange}
-					{...restProps}
-				/>
-				<span class={labelSpanClasses} aria-hidden="true"></span>
-				<span class={labelCopyClasses}>{label}</span>
-			</label>
-		{/each}
+		<div class="flex {orientation}">
+			{#each options as { value, label }, index}
+				<label
+					class={labelClasses}
+					class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
+				>
+					<input
+						class={inputClasses}
+						id="{id}-{name}-{index}"
+						{type}
+						{name}
+						{value}
+						disabled={isDisabled || disabledOptions.includes(value)}
+						checked={checkedOptions.includes(value)}
+						onchange={onChange}
+						{...restProps}
+					/>
+					<span class={labelSpanClasses} aria-hidden="true"></span>
+					<span class={labelCopyClasses}>{label}</span>
+				</label>
+			{/each}
+		</div>
 	</fieldset>
 </div>
 
 <style>
 	/**
-     * These radio and checkbox customizations are an amalgamation of various resources I've
-     * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
-     * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
-     * of inclusive hiding and custom radio/checkbox inputs.
-     */
+ * These radio and checkbox customizations are an amalgamation of various resources I've
+ * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
+ * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
+ * of inclusive hiding and custom radio/checkbox inputs.
+ */
 	.checkbox-group,
 	.radio-group {
 		--width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */
@@ -152,7 +157,7 @@
 	}
 
 	/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
-     */
+ */
 	.checkbox,
 	.radio {
 		position: absolute;
@@ -238,7 +243,7 @@
 	}
 
 	/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
-     so we add a multiplyer to even those out initially */
+ so we add a multiplyer to even those out initially */
 	.checkbox-label::before {
 		border: 2px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
 		width: var(--fluid-16);
@@ -328,9 +333,9 @@
 	}
 
 	/**
-      * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
-      * utilities.css if they're design requires it.
-      */
+  * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
+  * utilities.css if they're design requires it.
+  */
 	.checkbox-group-hidden,
 	.radio-group-hidden {
 		border: 0;
@@ -345,8 +350,8 @@
 	}
 
 	/* Targets both the label container and the span label that is used
-    to style the custom radio / checkbox. Note it does NOT target the input
-    itself. */
+to style the custom radio / checkbox. Note it does NOT target the input
+itself. */
 	.checkbox[disabled] ~ .checkbox-label-copy,
 	.radio[disabled] ~ .radio-label-copy,
 	.checkbox-label-wrap[class='disabled'],
@@ -374,4 +379,40 @@
 			outline-offset: -2px;
 		}
 	}
+
+	
+	.field-help,
+	.field-help-large,
+	.field-help-small,
+	.field-error,
+	.field-error-large,
+	.field-error-small,
+	.label-skin,
+	.label,
+	.input-addon-container,
+	.input-small,
+	.input-large,
+	.input-skin,
+	.input-underlined,
+	.input-underlined-bg,
+	.input {
+		color: var(--font-color, var(--dark));
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight, 300);
+		font-size: var(--font-size, 1rem);
+		line-height: var(--line-height, var(--fluid-20, 1.25rem));
+		width: 100%;
+		max-width: 100%;
+	}
+	.label {
+		display: inline-block;
+
+		/* Provided --input-vertical-pad isn't overriden we'll get 20px
+      label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
+		margin-block-start: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		margin-block-end: var(--input-label-pad, 0.375rem);
+		vertical-align: initial;
+	}
 </style>

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

@@ -1,3 +1,4 @@
+import { Orientation } from '../Styling.js';
 import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 declare const ChoiceInput: import("svelte").Component<Partial<{
     isSkinned: boolean;
@@ -12,6 +13,7 @@ declare const ChoiceInput: import("svelte").Component<Partial<{
     label: string;
     size: ChoiceInputSize;
     checked: string[];
+    orientation: Orientation;
 } & HtmlParts>, {}, "checked">;
 type ChoiceInput = ReturnType<typeof ChoiceInput>;
 export default ChoiceInput;

package/dist/components/form/Form.svelte

@@ -1,48 +1,82 @@
 <script lang="ts">
-    import { mapEntiresToOptions, type Field } from "./form.js";
-	import ChoiceInput from "./ChoiceInput.svelte";
-	import Input from "./Input.svelte";
-	import Select from "./Select.svelte";
-	import Switch from "./Switch.svelte";
+	import { mapEntiresToOptions, type Field } from './form.js';
+	import ChoiceInput from './ChoiceInput.svelte';
+	import Input from './Input.svelte';
+	import Select from './Select.svelte';
+	import Switch from './Switch.svelte';
+	import { Placement } from '../Styling.ts';
+	import { addTransactionSupport } from 'ioredis/built/transaction.js';
+	import Button from './Button.svelte';
 
-    interface Props {
-        action: string;
-        schema: Array<Field>;
-    }
+	interface FormButton{
+		label: string;
+		type: "submit" | "reset" | "button";
+		click?: () => void;
+	}
 
-    let { action, schema }: Props = $props();
+	interface Props {
+		actions: Array<FormButton>;
+		schema: Array<Field>;
+		buttonPosition: Placement;
+		buttonsContainer: string;
+	}
+
+	let {
+		actions = [],
+		schema,
+		buttonsContainer = '',
+		buttonPosition = Placement.Bottom
+	}: Partial<Props> = $props();
 </script>
 
+{#snippet buttons()}
+	<div class={buttonsContainer}>
+		{#each actions as action}
+			<Button type={action.type} click={action.click}>{action.label}</Button>
+		{/each}
+	</div>
+{/snippet}
+
 <form method="POST" {action}>
-    <fieldset>
-        {#each schema as field}
-            {#if field.type === "boolean"}
-                <Switch name={field.name} id={field.name} label={field.name} />
-            {:else if field.type === "enum" && field.meta.type === "select"}
-                <Select
-                    name={field.name}
-                    id={field.name}
-                    label={field.name}
-                    options={mapEntiresToOptions(field)}
-                    singleSelected="LOW"
-                />
-            {:else if field.type === "enum"}
-                <ChoiceInput
-                    name={field.name}
-                    id={field.name}
-                    label={field.name}
-                    type={field.meta.type}
-                    options={mapEntiresToOptions(field)}
-                />
-            {:else if field.type === "string" || field.type === "number"}
-                <Input
-                    name={field.name}
-                    id={field.name}
-                    label={field.name}
-                    type={field.meta.type}
-                    isRequired={field.isRequired}
-                />
-            {/if}
-        {/each}
-    </fieldset>
+	<fieldset>
+		{#if buttonPosition === Placement.Top}
+			{@render buttons()}
+		{/if}
+
+		<div>
+			{#each schema as field}
+				{#if field.type === 'boolean'}
+					<Switch name={field.name} id={field.name} label={field.name} />
+				{:else if field.type === 'enum' && field.meta.type === 'select'}
+					<Select
+						name={field.name}
+						id={field.name}
+						label={field.name}
+						options={mapEntiresToOptions(field)}
+						singleSelected="LOW"
+					/>
+				{:else if field.type === 'enum'}
+					<ChoiceInput
+						name={field.name}
+						id={field.name}
+						label={field.name}
+						type={field.meta.type}
+						options={mapEntiresToOptions(field)}
+					/>
+				{:else if field.type === 'string' || field.type === 'number'}
+					<Input
+						name={field.name}
+						id={field.name}
+						label={field.name}
+						type={field.meta.type}
+						isRequired={field.isRequired}
+					/>
+				{/if}
+			{/each}
+		</div>
+		
+		{#if buttonPosition !== Placement.Top}
+			{@render buttons()}
+		{/if}
+	</fieldset>
 </form>

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

@@ -1,8 +1,14 @@
-import { type Field } from "./form.js";
-interface Props {
-    action: string;
+import { type Field } from './form.js';
+import { Placement } from '../Styling.ts';
+declare const Form: import("svelte").Component<Partial<{
+    actions: Array<{
+        label: string;
+        type: "submit" | "reset" | "button";
+        click?: () => void;
+    }>;
     schema: Array<Field>;
-}
-declare const Form: import("svelte").Component<Props, {}, "">;
+    buttonPosition: Placement;
+    buttonsContainer: string;
+}>, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.10.27",
+	"version": "4.10.29",
 	"watch": {
 		"build": {
 			"patterns": [