@axium/client 0.12.0 → 0.12.2

package/lib/Popover.svelte

@@ -47,7 +47,10 @@
 	}
 
 	.popover-toggle + [popover] {
-		position-try: flip-inline;
+		position-try-fallbacks:
+			flip-inline,
+			flip-block,
+			flip-block flip-inline;
 		position-visibility: always;
 		left: anchor(left);
 		top: anchor(bottom);

package/lib/ZodInput.svelte

@@ -14,13 +14,23 @@
 		schema: ZodPref;
 		defaultValue?: any;
 		optional?: boolean;
+		noLabel?: boolean;
 		updateValue(value: any): void;
 	}
 
-	let { rootValue = $bindable(), label, path, schema, optional = false, defaultValue, idPrefix, updateValue }: Props = $props();
+	let {
+		rootValue = $bindable(),
+		label,
+		path,
+		schema,
+		optional = false,
+		defaultValue,
+		idPrefix,
+		updateValue,
+		noLabel = false,
+	}: Props = $props();
 	const id = (idPrefix ? idPrefix + ':' : '') + path.replaceAll(' ', '_');
 
-	let input = $state<HTMLInputElement | HTMLSelectElement>()!;
 	let value = $state<any>(getByString(rootValue, path));
 
 	let error = $state();
@@ -82,19 +92,9 @@
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
-		<label for={id}>{label || path}</label>
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
-		<input
-			bind:this={input}
-			{id}
-			{...rest}
-			bind:value
-			{onchange}
-			{onkeyup}
-			required={!optional}
-			{defaultValue}
-			class={[error && 'error']}
-		/>
+		<input {id} {...rest} bind:value {onchange} {onkeyup} required={!optional} {defaultValue} class={[error && 'error']} />
 	</div>
 {/snippet}
 
@@ -106,8 +106,8 @@
 	{@render _in({ type: 'number', min: Number(schema.minValue), max: Number(schema.maxValue), step: 1 })}
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
-		<label for="{id}:checkbox">{label || path}</label>
-		<input bind:checked={value} bind:this={input} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
+		{#if !noLabel}<label for="{id}:checkbox">{label || path}</label>{/if}
+		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
 		<label for="{id}:checkbox" {id} class="checkbox">
 			{#if value}<Icon i="check" --size="1.3em" />{/if}
 		</label>
@@ -123,7 +123,7 @@
 {:else if schema.type == 'literal'}
 	<div class="ZodInput">
 		<label for={id}>{label || path}</label>
-		<select bind:this={input} bind:value {id} {onchange} {onkeyup} required={!optional}>
+		<select bind:value {id} {onchange} {onkeyup} required={!optional}>
 			{#each schema.values as value}
 				<option {value} selected={value === value}>{value}</option>
 			{/each}
@@ -138,20 +138,40 @@
 	<ZodInput bind:rootValue {updateValue} {idPrefix} {path} {defaultValue} schema={schema.def.innerType} optional={true} />
 {:else if schema.type == 'array'}
 	<div class="ZodInput">
-		<label for={id}>{label || path}</label>
-		{#each value, i}
-			<div class="ZodInput-element">
-				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{i}" schema={schema.element} />
-			</div>
-		{:else}
-			<i>Empty</i>
-		{/each}
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<div class="ZodInput-array">
+			{#each value, i}
+				<div class="ZodInput-element">
+					<input
+						id="{id}.{i}"
+						bind:value={value[i]}
+						{onchange}
+						{onkeyup}
+						required={!optional}
+						{defaultValue}
+						class={[error && 'error']}
+					/>
+					<button
+						onclick={e => {
+							value.splice(i, 1);
+							onchange(e);
+						}}
+					>
+						<Icon i="trash" --size="16px" />
+					</button>
+				</div>
+			{/each}
+			<button onclick={() => value.push('')}>
+				<Icon i="plus" --size="16px" />
+			</button>
+		</div>
 	</div>
 {:else if schema.type == 'record'}
 	<div class="ZodInput-record">
 		{#each Object.keys(value) as key}
 			<div class="ZodInput-record-entry">
-				<label for={id}>{key}</label>
+				{#if !noLabel}<label for={id}>{key}</label>{/if}
 				<ZodInput bind:rootValue {updateValue} {idPrefix} {defaultValue} path="{path}.{key}" schema={schema.valueType} />
 			</div>
 		{/each}
@@ -170,8 +190,9 @@
 	</div>
 {:else if schema.type == 'enum'}
 	<div class="ZodInput">
-		<label for={id}>{label || path}</label>
-		<select bind:this={input} {id} {onchange} {onkeyup} bind:value required={!optional}>
+		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
+		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
+		<select {id} {onchange} {onkeyup} bind:value required={!optional}>
 			{#each Object.entries(schema.enum) as [key, value]}
 				<option {value} selected={value === value}>{key}</option>
 			{/each}
@@ -216,9 +237,25 @@
 		}
 	}
 
+	.ZodInput-element {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+
+		button {
+			position: relative;
+			right: 1em;
+		}
+	}
+
+	.ZodInput-array {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+	}
+
 	.ZodInput-object,
 	.ZodInput-record,
-	.ZodInput-array,
 	.ZodInput-tuple {
 		display: flex;
 		flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.12.0",
+	"version": "0.12.2",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",