feat: Native select & enhanced select (#9)

* wip: Select component * feat: Select componenet with enhanced layout * linting
HubbeDev · Jan 8, 2024 · 3527763 · 3527763
1 parent 8c297b6
commit 3527763
Show file tree

Hide file tree

Showing 48 changed files with 276 additions and 826 deletions.
diff --git a/apps/svelte-gravity-forms/src/lib/components/button/button.svelte b/apps/svelte-gravity-forms/src/lib/components/button/button.svelte
@@ -35,11 +35,13 @@
 	on:click
 	on:keydown
 >
-	{#if $formSubmtiButton?.text}
-		{$formSubmtiButton.text}
-	{:else if $formSubmtiButton?.imageUrl}
-		<img src={$formSubmtiButton.imageUrl} alt="" width="20" height="20" class="h-5 w-5" />
-	{:else}
-		Submit
-	{/if}
+	<slot>
+		{#if $formSubmtiButton?.text}
+			{$formSubmtiButton.text}
+		{:else if $formSubmtiButton?.imageUrl}
+			<img src={$formSubmtiButton.imageUrl} alt="" width="20" height="20" class="h-5 w-5" />
+		{:else}
+			Submit
+		{/if}
+	</slot>
 </ButtonPrimitive.Root>
diff --git a/apps/svelte-gravity-forms/src/lib/components/field/field.svelte b/apps/svelte-gravity-forms/src/lib/components/field/field.svelte
@@ -1,25 +1,13 @@
 <script lang="ts">
-	import * as GFform from '$lib/components/form/index.js';
-	import type { Props, InputEvents } from './index.js';
+	import * as GFform from '$lib/components/index.js';
+	import type { Props } from './index.js';
 	import { getCtx } from '$lib/ctx.js';
 
 	type $$Props = Props;
-	type $$Events = InputEvents;
 
-	/* let className: $$Props['class'] = undefined; */
-
-	export let fieldId: $$Props['fieldId'];
-	export let label: $$Props['label'] = undefined;
-	export let labelPosition: $$Props['labelPosition'] = undefined;
-	export let description: $$Props['description'] = undefined;
-	export let descriptionPosition: $$Props['descriptionPosition'] = undefined;
-	export let isRequired: $$Props['isRequired'] = undefined;
-	export let defaultValue: $$Props['defaultValue'] = undefined;
-	export let placeholder: $$Props['placeholder'] = undefined;
-	export let columnSpan: $$Props['columnSpan'] = undefined;
+	export let field: $$Props['field'] = undefined;
 	export let index: $$Props['index'] = undefined;
 	export let config: $$Props['config'];
-	export let type: $$Props['type'] = undefined;
 
 	const {
 		helpers: { getColumnSpan, showFieldLabel, showDescription },
@@ -29,43 +17,67 @@
 	/* 	export { className as class }; */
 </script>
 
-<div data-svelte-gf-field-id={index} class={columnSpan ? getColumnSpan(columnSpan) : ''}>
-	<GFform.Field {config} name={`input_${fieldId}`}>
-		<GFform.Item>
-			{#if label && showFieldLabel(labelPosition, 'above')}
-				<GFform.Label>
-					{label}
-					{#if isRequired}
-						{#if $formRequiredIndicator == 'asterisk'}
-							<span class="text-red-600">*</span>
-						{:else if $formRequiredIndicator == 'text'}
-							<span class="text-xs text-muted-foreground"> (required)</span>
+{#if field}
+	<div
+		data-svelte-gf-field-id={index}
+		class={field.layoutGridColumnSpan ? getColumnSpan(field.layoutGridColumnSpan) : ''}
+	>
+		<GFform.Field {config} name={`input_${field.id}`}>
+			<GFform.Item>
+				{#if field.label && showFieldLabel(field.labelPlacement, 'above')}
+					<GFform.Label>
+						{field.label}
+						{#if field.isRequired}
+							{#if $formRequiredIndicator == 'asterisk'}
+								<span class="text-red-600">*</span>
+							{:else if $formRequiredIndicator == 'text'}
+								<span class="text-xs text-muted-foreground"> (required)</span>
+							{/if}
 						{/if}
-					{/if}
-				</GFform.Label>
-			{/if}
+					</GFform.Label>
+				{/if}
 
-			{#if description && showDescription(descriptionPosition, 'above')}
-				<GFform.Description>{description}</GFform.Description>
-			{/if}
+				{#if field.description && showDescription(field.descriptionPlacement, 'above')}
+					<GFform.Description>{field.description}</GFform.Description>
+				{/if}
 
-			{#if type === 'text'}
-				<GFform.Input value={defaultValue ?? undefined} placeholder={placeholder ?? ''} />
-			{:else if type === 'email'}
-				<GFform.Input
-					type="email"
-					value={defaultValue ?? undefined}
-					placeholder={placeholder ?? ''}
-				/>
-			{:else if type === 'textarea'}
-				<GFform.Textarea value={defaultValue ?? undefined} placeholder={placeholder ?? ''} />
-			{/if}
+				{#if field.type === 'text'}
+					<GFform.Input
+						value={field.defaultValue ?? undefined}
+						placeholder={field.placeholder ?? ''}
+					/>
+				{:else if field.type === 'email'}
+					<GFform.Input
+						type="email"
+						value={field.defaultValue ?? undefined}
+						placeholder={field.placeholder ?? ''}
+					/>
+				{:else if field.type === 'textarea'}
+					<GFform.Textarea
+						value={field.defaultValue ?? undefined}
+						placeholder={field.placeholder ?? ''}
+					/>
+				{:else if field.type === 'select'}
+					{#if field.choices}
+						{#if field.enableEnhancedUI}
+							<GFform.Select choices={field.choices} placeholder={field.placeholder} />
+						{:else}
+							<GFform.FormNativeSelect class="w-full">
+								<option value="">{field.placeholder}</option>
+								{#each field.choices as choice}
+									<option value={choice.value}>{choice.text}</option>
+								{/each}
+							</GFform.FormNativeSelect>
+						{/if}
+					{/if}
+				{/if}
 
-			{#if description && showDescription(descriptionPosition, 'below')}
-				<GFform.Description>{description}</GFform.Description>
-			{/if}
+				{#if field.description && showDescription(field.descriptionPlacement, 'below')}
+					<GFform.Description>{field.description}</GFform.Description>
+				{/if}
 
-			<GFform.Validation />
-		</GFform.Item>
-	</GFform.Field>
-</div>
+				<GFform.Validation />
+			</GFform.Item>
+		</GFform.Field>
+	</div>
+{/if}
diff --git a/apps/svelte-gravity-forms/src/lib/components/field/index.ts b/apps/svelte-gravity-forms/src/lib/components/field/index.ts
@@ -1,9 +1,9 @@
 import Root from './field.svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { InputEvents } from '../input/index.js';
 import type { SuperForm } from 'sveltekit-superforms/client';
 import type { ZodValidation } from 'sveltekit-superforms';
 import type { AnyZodObject } from 'zod';
+import type { GFFieldProps } from '$lib/internal/types.js';
 
 export type Form<T extends FormValidation> = {
 	schema: T;
@@ -15,24 +15,24 @@ export type Arrayable<T> = T | T[];
 export type FormValidation = ZodValidation<AnyZodObject>;
 
 type Props = HTMLInputAttributes & {
-	fieldId: number;
+	/* 	fieldId: number; */
 	config: Form<FormValidation>;
-	label?: string;
+	field?: GFFieldProps;
+	/* label?: string;
 	labelPosition?: string;
 	description?: string;
 	descriptionPosition?: string;
 	isRequired?: boolean;
 	defaultValue?: string;
 	columnSpan?: number;
-	placeholder?: string;
+	placeholder?: string; */
 	index?: number;
-	type?: string;
+	/* 	type?: string; */
 };
 
 export {
 	Root,
 	type Props,
-	type InputEvents,
 	//
 	Root as FormField
 };
diff --git a/apps/svelte-gravity-forms/src/lib/components/form/index.ts b/apps/svelte-gravity-forms/src/lib/components/form/index.ts
diff --git a/apps/svelte-gravity-forms/src/lib/components/index.ts b/apps/svelte-gravity-forms/src/lib/components/index.ts
@@ -1,3 +1,54 @@
-import { default as GFButton } from './button/button.svelte';
+import { Form as FormPrimitive } from 'formsnap';
+/* import * as RadioGroupComp from '$lib/components/ui/radio-group/index.js';
+import * as SelectComp from '$lib/components/ui/select/index.js'; */
+import { Item } from '$components/item/index.js';
+import { Input } from '$components/input/index.js';
+import { Textarea } from '$components/textarea/index.js';
+import { Description } from '$components/description/index.js';
+import { Label } from '$components/label/index.js';
+import { Validation } from '$components/validation/index.js';
+import { FormField } from '$components/field/index.js';
+import { Button } from '$components/button/index.js';
+import { FormSelect as Select } from '$components/select/index.js';
+import { NativeSelect } from '$components/select/index.js';
 
-export { GFButton };
+const Root = FormPrimitive.Root;
+const Field = FormPrimitive.Field;
+const Control = FormPrimitive.Control;
+const NativeRadio = FormPrimitive.Radio;
+
+export type Props = {
+	formId?: number;
+};
+
+export {
+	Root,
+	Field,
+	FormField,
+	Control,
+	Item,
+	Input,
+	Textarea,
+	Label,
+	Button,
+	Validation,
+	Description,
+	NativeRadio,
+	Select,
+	NativeSelect,
+	//
+	Root as Form,
+	Field as BitsField,
+	FormField as GFFormField,
+	Control as FormControl,
+	Item as FormItem,
+	Input as FormInput,
+	Textarea as FormTextarea,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeRadio as FormNativeRadio,
+	Button as FormButton,
+	Select as FormSelect,
+	NativeSelect as FormNativeSelect
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/input/index.ts b/apps/svelte-gravity-forms/src/lib/components/input/index.ts
@@ -8,6 +8,8 @@ export type InputEvents = {
 	change: FormInputEvent<Event>;
 	click: FormInputEvent<MouseEvent>;
 	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
 	keydown: FormInputEvent<KeyboardEvent>;
 	keypress: FormInputEvent<KeyboardEvent>;
 	keyup: FormInputEvent<KeyboardEvent>;

diff --git a/apps/svelte-gravity-forms/src/lib/components/input/input.svelte b/apps/svelte-gravity-forms/src/lib/components/input/input.svelte
@@ -7,10 +7,10 @@
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;
 
-	/* 	const { attrStore, value } = getFormField(); */
-	const { attrStore, value } = getFormField();
 	let className: $$Props['class'] = undefined;
 
+	const { attrStore, value } = getFormField();
+
 	export { className as class };
 </script>
 

diff --git a/apps/svelte-gravity-forms/src/lib/components/root.svelte b/apps/svelte-gravity-forms/src/lib/components/root.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as GFform from '$lib/components/form/index.js';
+	import * as GFform from '$lib/components/index.js';
 	import type { Props } from './types.js';
 	import { setCtx } from '../ctx.js';
 
@@ -54,22 +54,13 @@
 					{@html $comfirmationText}
 				</div>
 			{:else}
+				<div class="col-span-12 mb-4">
+					<h3 class="mb-2 text-3xl font-bold">{$formObject.title}</h3>
+					<p class="text-base">{$formObject.description}</p>
+				</div>
 				{#if $formFields}
 					{#each $formFields as field, i}
-						<GFform.FormField
-							type={field.type}
-							index={i}
-							label={field.label}
-							labelPosition={field.labelPlacement}
-							description={field.description}
-							descriptionPosition={field.descriptionPlacement}
-							fieldId={field.id}
-							isRequired={field.isRequired}
-							defaultValue={field.defaultValue}
-							columnSpan={field.layoutGridColumnSpan}
-							placeholder={field.placeholder}
-							{config}
-						/>
+						<GFform.FormField {field} index={i} {config} />
 					{/each}
 				{/if}
 				<GFform.Button class="" size="lg" type="submit"></GFform.Button>