@warkypublic/svelix 0.1.0

package/dist/components/Former/FormerButtonArea.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { FormRequestType } from "./types";
+
+  interface Props {
+    closeButtonTitle?: string;
+    dirty?: boolean;
+    keepOpen?: boolean;
+    onClose?: () => void;
+    onSave?: () => Promise<void>;
+    onToggleKeepOpen?: (checked: boolean) => void;
+    request?: FormRequestType;
+    saveButtonTitle?: string;
+    showKeepOpenSwitch?: boolean;
+  }
+
+  const {
+    closeButtonTitle = "Close",
+    dirty,
+    keepOpen,
+    onClose,
+    onSave,
+    onToggleKeepOpen,
+    request,
+    saveButtonTitle = "Save",
+    showKeepOpenSwitch,
+  }: Props = $props();
+
+  const disabledSave = $derived(
+    ["select", "view"].includes(request ?? "") ||
+      (["update"].includes(request ?? "") && !dirty),
+  );
+
+  const saveTooltip = $derived(
+    disabledSave
+      ? "Cannot save in view or select mode, or no changes made."
+      : "Save the current record",
+  );
+
+  const saveBtnClass = $derived(
+    request === "delete"
+      ? "preset-filled-error-token"
+      : "preset-filled-primary-500",
+  );
+
+  let saving = $state(false);
+
+  async function handleSave() {
+    if (!onSave) return;
+    saving = true;
+    try {
+      await onSave();
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div
+  class="flex items-center justify-center gap-2 p-2 shadow-sm w-full flex-wrap"
+>
+  {#if typeof onClose === "function"}
+    <button
+      class="btn preset-filled-secondary-500 min-w-32"
+      type="button"
+      onclick={onClose}
+    >
+      ✕ {closeButtonTitle}
+    </button>
+  {/if}
+
+  {#if showKeepOpenSwitch}
+    <label class="flex items-center gap-2 text-sm">
+      <input
+        checked={keepOpen}
+        class="checkbox"
+        type="checkbox"
+        onchange={(e) => onToggleKeepOpen?.(e.currentTarget.checked)}
+      />
+      Keep Open
+    </label>
+  {/if}
+
+  <button
+    class="btn {saveBtnClass} min-w-32"
+    disabled={disabledSave || saving}
+    title={saveTooltip}
+    type="button"
+    onclick={handleSave}
+  >
+    {#if saving}<span class="animate-spin mr-1">⟳</span>{/if}
+    💾 {saveButtonTitle}
+  </button>
+</div>

package/dist/components/Former/FormerButtonArea.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { FormRequestType } from "./types";
+interface Props {
+    closeButtonTitle?: string;
+    dirty?: boolean;
+    keepOpen?: boolean;
+    onClose?: () => void;
+    onSave?: () => Promise<void>;
+    onToggleKeepOpen?: (checked: boolean) => void;
+    request?: FormRequestType;
+    saveButtonTitle?: string;
+    showKeepOpenSwitch?: boolean;
+}
+declare const FormerButtonArea: import("svelte").Component<Props, {}, "">;
+type FormerButtonArea = ReturnType<typeof FormerButtonArea>;
+export default FormerButtonArea;

package/dist/components/Former/FormerDrawer.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
+	import Former from './Former.svelte';
+	import type { FormerProps, FormRequestType } from './types';
+
+	interface Props extends FormerProps {
+		/**
+		 * Override the auto-generated drawer title.
+		 * When omitted the title is derived from the request type and the unique key value:
+		 *   insert  → "New Record"
+		 *   update  → "Edit Record — {key}"
+		 *   delete  → "Delete Record — {key}"
+		 */
+		title?: string;
+		/**
+		 * Width of the drawer panel.
+		 * @default '32rem'
+		 */
+		width?: string;
+	}
+
+	let {
+		afterGet,
+		afterSave,
+		beforeSave,
+		children,
+		id,
+		keepOpen = $bindable(false),
+		layout,
+		onAPICall,
+		onChange,
+		onClose,
+		onConfirmDelete,
+		onError,
+		onOpen,
+		opened = $bindable(false),
+		primeData,
+		request = $bindable<FormRequestType>('insert'),
+		title,
+		uniqueKeyField = 'id',
+		values = $bindable<any>(undefined),
+		width = '32rem',
+	}: Props = $props();
+
+	const autoTitle = $derived(
+		title ??
+			(request === 'delete'
+				? `Delete Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`
+				: request === 'insert'
+					? 'New Record'
+					: `Edit Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`)
+	);
+
+	const animBackdrop =
+		'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
+	const animContent =
+		'transition transition-discrete opacity-0 translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0';
+</script>
+
+<Dialog
+	open={opened}
+	onOpenChange={(e) => {
+		opened = e.open;
+		if (!e.open) onClose?.();
+	}}
+	closeOnInteractOutside={false}
+	closeOnEscape={false}
+	modal
+>
+	<Portal>
+		<Dialog.Backdrop class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm {animBackdrop}" />
+		<Dialog.Positioner class="fixed inset-0 z-50 flex justify-end">
+			<Dialog.Content
+				class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token {animContent}"
+				style="width: {width}"
+			>
+				<header
+					class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-surface-300-600 shrink-0"
+				>
+					<Dialog.Title class="text-lg font-semibold">{autoTitle}</Dialog.Title>
+					<Dialog.CloseTrigger class="btn-icon btn-icon-sm preset-tonal" aria-label="Close drawer">
+						✕
+					</Dialog.CloseTrigger>
+				</header>
+
+				<div class="flex-1 min-h-0 overflow-auto">
+					<Former
+						bind:values
+						bind:opened
+						bind:request
+						bind:keepOpen
+						{afterGet}
+						{afterSave}
+						{beforeSave}
+						{children}
+						{id}
+						layout={{ buttonArea: 'bottom', ...layout }}
+						{onAPICall}
+						{onChange}
+						{onConfirmDelete}
+						{onError}
+						{onOpen}
+						{primeData}
+						{uniqueKeyField}
+						onClose={(data) => {
+							opened = false;
+							onClose?.(data);
+						}}
+					/>
+				</div>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog>

package/dist/components/Former/FormerDrawer.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { FormerProps } from './types';
+interface Props extends FormerProps {
+    /**
+     * Override the auto-generated drawer title.
+     * When omitted the title is derived from the request type and the unique key value:
+     *   insert  → "New Record"
+     *   update  → "Edit Record — {key}"
+     *   delete  → "Delete Record — {key}"
+     */
+    title?: string;
+    /**
+     * Width of the drawer panel.
+     * @default '32rem'
+     */
+    width?: string;
+}
+declare const FormerDrawer: import("svelte").Component<Props, {}, "values" | "opened" | "request" | "keepOpen">;
+type FormerDrawer = ReturnType<typeof FormerDrawer>;
+export default FormerDrawer;

package/dist/components/Former/FormerDrawerPreview.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import FormerDrawer from './FormerDrawer.svelte';
+	import type { FormRequestType } from './types';
+	import TextInputCtrl from '../FormerControllers/TextInputCtrl.svelte';
+	import PasswordInputCtrl from '../FormerControllers/PasswordInputCtrl.svelte';
+	import NumberInputCtrl from '../FormerControllers/NumberInputCtrl.svelte';
+	import NativeSelectCtrl from '../FormerControllers/NativeSelectCtrl.svelte';
+	import TextAreaCtrl from '../FormerControllers/TextAreaCtrl.svelte';
+	import SwitchCtrl from '../FormerControllers/SwitchCtrl.svelte';
+
+	interface UserForm {
+		id?: number;
+		firstName: string;
+		lastName: string;
+		email: string;
+		password: string;
+		age?: number;
+		role: string;
+		department: string;
+		bio: string;
+		website: string;
+		emailNotifications: boolean;
+		active: boolean;
+	}
+
+	interface Props {
+		request?: FormRequestType;
+	}
+
+	const { request = 'insert' }: Props = $props();
+
+	const emptyUser: UserForm = {
+		firstName: '',
+		lastName: '',
+		email: '',
+		password: '',
+		age: undefined,
+		role: '',
+		department: '',
+		bio: '',
+		website: '',
+		emailNotifications: true,
+		active: true,
+	};
+
+	const filledUser: UserForm = {
+		id: 1,
+		firstName: 'Jane',
+		lastName: 'Smith',
+		email: 'jane.smith@example.com',
+		password: '',
+		age: 32,
+		role: 'admin',
+		department: 'engineering',
+		bio: 'Senior software engineer with 10 years of experience building scalable systems.',
+		website: 'https://janesmith.dev',
+		emailNotifications: true,
+		active: true,
+	};
+
+	const roleOptions = [
+		{ label: 'Admin', value: 'admin' },
+		{ label: 'Editor', value: 'editor' },
+		{ label: 'Viewer', value: 'viewer' },
+	];
+
+	const departmentOptions = [
+		{ label: 'Engineering', value: 'engineering' },
+		{ label: 'Product', value: 'product' },
+		{ label: 'Design', value: 'design' },
+		{ label: 'Marketing', value: 'marketing' },
+		{ label: 'Operations', value: 'operations' },
+	];
+
+	let values = $state<UserForm>(request === 'insert' ? { ...emptyUser } : { ...filledUser });
+	let lastSaved = $state<UserForm | undefined>(undefined);
+	let opened = $state(false);
+</script>
+
+<div class="p-8 space-y-6">
+	<div class="space-y-2">
+		<button class="btn preset-filled-primary-token" onclick={() => (opened = true)}>
+			Open Drawer
+		</button>
+		{#if lastSaved}
+			<div class="card p-4">
+				<p class="font-semibold text-sm mb-2">Saved data:</p>
+				<pre class="text-xs overflow-auto">{JSON.stringify(lastSaved, null, 2)}</pre>
+			</div>
+		{/if}
+	</div>
+
+	<FormerDrawer
+		bind:values
+		bind:opened
+		{request}
+		onAPICall={async (mode, _req, data) => {
+			await new Promise((resolve) => setTimeout(resolve, 800));
+			if (mode === 'mutate') {
+				return { ...data, id: (data as UserForm)?.id ?? 42 } as UserForm;
+			}
+			return data as UserForm;
+		}}
+		afterSave={(data) => {
+			lastSaved = data as UserForm;
+		}}
+		onClose={() => {
+			opened = false;
+		}}
+	>
+		{#snippet children(state)}
+			{@const isReadonly = state.request === 'view' || state.request === 'delete'}
+
+			<div class="p-6 space-y-4">
+				<div class="grid grid-cols-2 gap-4">
+					<TextInputCtrl
+						label="First Name"
+						name="firstName"
+						value={state.values?.firstName ?? ''}
+						required
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, firstName: v })}
+					/>
+					<TextInputCtrl
+						label="Last Name"
+						name="lastName"
+						value={state.values?.lastName ?? ''}
+						required
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, lastName: v })}
+					/>
+				</div>
+
+				<TextInputCtrl
+					label="Email"
+					name="email"
+					type="email"
+					value={state.values?.email ?? ''}
+					required
+					disabled={isReadonly}
+					onchange={(v) => state.setState('values', { ...state.values, email: v })}
+				/>
+
+				{#if state.request === 'insert'}
+					<PasswordInputCtrl
+						label="Password"
+						name="password"
+						value={state.values?.password ?? ''}
+						required
+						onchange={(v) => state.setState('values', { ...state.values, password: v })}
+					/>
+				{/if}
+
+				<div class="grid grid-cols-2 gap-4">
+					<NumberInputCtrl
+						label="Age"
+						name="age"
+						value={state.values?.age}
+						min={18}
+						max={120}
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, age: v })}
+					/>
+					<TextInputCtrl
+						label="Website"
+						name="website"
+						type="url"
+						value={state.values?.website ?? ''}
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, website: v })}
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<NativeSelectCtrl
+						label="Role"
+						name="role"
+						value={state.values?.role ?? ''}
+						required
+						placeholder="Select role"
+						options={roleOptions}
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, role: v })}
+					/>
+					<NativeSelectCtrl
+						label="Department"
+						name="department"
+						value={state.values?.department ?? ''}
+						placeholder="Select department"
+						options={departmentOptions}
+						disabled={isReadonly}
+						onchange={(v) => state.setState('values', { ...state.values, department: v })}
+					/>
+				</div>
+
+				<TextAreaCtrl
+					label="Bio"
+					name="bio"
+					value={state.values?.bio ?? ''}
+					rows={3}
+					placeholder="Tell us about yourself..."
+					disabled={isReadonly}
+					onchange={(v) => state.setState('values', { ...state.values, bio: v })}
+				/>
+
+				<div class="flex gap-8">
+					<SwitchCtrl
+						label="Email Notifications"
+						name="emailNotifications"
+						checked={state.values?.emailNotifications ?? true}
+						disabled={isReadonly}
+						onchange={(c) => state.setState('values', { ...state.values, emailNotifications: c })}
+					/>
+					<SwitchCtrl
+						label="Active"
+						name="active"
+						checked={state.values?.active ?? true}
+						disabled={isReadonly}
+						onchange={(c) => state.setState('values', { ...state.values, active: c })}
+					/>
+				</div>
+			</div>
+		{/snippet}
+	</FormerDrawer>
+</div>

package/dist/components/Former/FormerDrawerPreview.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FormRequestType } from './types';
+interface Props {
+    request?: FormRequestType;
+}
+declare const FormerDrawerPreview: import("svelte").Component<Props, {}, "">;
+type FormerDrawerPreview = ReturnType<typeof FormerDrawerPreview>;
+export default FormerDrawerPreview;

package/dist/components/Former/FormerModal.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
+	import Former from './Former.svelte';
+	import type { FormerProps, FormRequestType } from './types';
+
+	interface Props extends FormerProps {
+		/**
+		 * Override the auto-generated dialog title.
+		 * When omitted the title is derived from the request type and the unique key value:
+		 *   insert  → "New Record"
+		 *   update  → "Edit Record — {key}"
+		 *   delete  → "Delete Record — {key}"
+		 */
+		title?: string;
+	}
+
+	let {
+		afterGet,
+		afterSave,
+		beforeSave,
+		children,
+		id,
+		keepOpen = $bindable(false),
+		layout,
+		onAPICall,
+		onChange,
+		onClose,
+		onConfirmDelete,
+		onError,
+		onOpen,
+		opened = $bindable(false),
+		primeData,
+		request = $bindable<FormRequestType>('insert'),
+		title,
+		uniqueKeyField = 'id',
+		values = $bindable<any>(undefined),
+	}: Props = $props();
+
+	const autoTitle = $derived(
+		title ??
+			(request === 'delete'
+				? `Delete Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`
+				: request === 'insert'
+					? 'New Record'
+					: `Edit Record${(values as any)?.[uniqueKeyField] ? ` — ${(values as any)[uniqueKeyField]}` : ''}`)
+	);
+
+	const animBackdrop =
+		'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
+	const animContent =
+		'transition transition-discrete opacity-0 scale-95 starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100';
+</script>
+
+<Dialog
+	open={opened}
+	onOpenChange={(e) => {
+		opened = e.open;
+		if (!e.open) onClose?.();
+	}}
+	closeOnInteractOutside={false}
+	closeOnEscape={false}
+	modal
+>
+	<Portal>
+		<Dialog.Backdrop class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm {animBackdrop}" />
+		<Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center p-4">
+			<Dialog.Content
+				class="card bg-surface-100-900 shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden {animContent}"
+			>
+				<header
+					class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-surface-300-600 shrink-0"
+				>
+					<Dialog.Title class="text-lg font-semibold">{autoTitle}</Dialog.Title>
+					<Dialog.CloseTrigger class="btn-icon btn-icon-sm preset-tonal" aria-label="Close dialog">
+						✕
+					</Dialog.CloseTrigger>
+				</header>
+
+				<div class="flex-1 min-h-0 overflow-auto">
+					<Former
+						bind:values
+						bind:opened
+						bind:request
+						bind:keepOpen
+						{afterGet}
+						{afterSave}
+						{beforeSave}
+						{children}
+						{id}
+						layout={{ buttonArea: 'bottom', ...layout }}
+						{onAPICall}
+						{onChange}
+						{onConfirmDelete}
+						{onError}
+						{onOpen}
+						{primeData}
+						{uniqueKeyField}
+						onClose={(data) => {
+							opened = false;
+							onClose?.(data);
+						}}
+					/>
+				</div>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog>

package/dist/components/Former/FormerModal.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { FormerProps } from './types';
+interface Props extends FormerProps {
+    /**
+     * Override the auto-generated dialog title.
+     * When omitted the title is derived from the request type and the unique key value:
+     *   insert  → "New Record"
+     *   update  → "Edit Record — {key}"
+     *   delete  → "Delete Record — {key}"
+     */
+    title?: string;
+}
+declare const FormerModal: import("svelte").Component<Props, {}, "values" | "opened" | "request" | "keepOpen">;
+type FormerModal = ReturnType<typeof FormerModal>;
+export default FormerModal;