@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Former/FormerButtonArea.svelte

@@ -1,71 +1,20 @@
-<script lang="ts">
-  import type { FormRequestType } from "./types";
-
-  export interface Props {
-    closeButtonTitle?: string;
-    deleteConfirmed?: boolean;
-    dirty?: boolean;
-    keepOpen?: boolean;
-    onClose?: () => void;
-    onSave?: () => Promise<void>;
-    onToggleKeepOpen?: (checked: boolean) => void;
-    request?: FormRequestType;
-    saveButtonTitle?: string;
-    showKeepOpenSwitch?: boolean;
-  }
-
-  const {
-    closeButtonTitle = "Close",
-    deleteConfirmed,
-    dirty,
-    keepOpen,
-    onClose,
-    onSave,
-    onToggleKeepOpen,
-    request,
-    saveButtonTitle,
-    showKeepOpenSwitch,
-  }: Props = $props();
-
-  const effectiveSaveTitle = $derived(
-    saveButtonTitle ?? (request === "delete" ? "Delete" : "Save"),
-  );
-
-  const saveIcon = $derived(request === "delete" ? "🗑" : "💾");
-
-  const disabledSave = $derived(
-    ["select", "view"].includes(request ?? "") ||
-      (["update"].includes(request ?? "") && !dirty) ||
-      (request === "delete" && !deleteConfirmed),
-  );
-
-  const saveTooltip = $derived(
-    disabledSave
-      ? request === "delete"
-        ? "Confirm deletion below before proceeding."
-        : "Cannot save in view or select mode, or no changes made."
-      : request === "delete"
-        ? "Permanently delete this record"
-        : "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 lang="ts">const { closeButtonTitle = "Close", deleteConfirmed, dirty, keepOpen, onClose, onSave, onToggleKeepOpen, request, saveButtonTitle, showKeepOpenSwitch } = $props();
+const effectiveSaveTitle = $derived(saveButtonTitle ?? (request === "delete" ? "Delete" : "Save"));
+const saveIcon = $derived(request === "delete" ? "🗑" : "💾");
+const disabledSave = $derived(["select", "view"].includes(request ?? "") || ["update"].includes(request ?? "") && !dirty || request === "delete" && !deleteConfirmed);
+const saveTooltip = $derived(disabledSave ? request === "delete" ? "Confirm deletion below before proceeding." : "Cannot save in view or select mode, or no changes made." : request === "delete" ? "Permanently delete this record" : "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;
+	}
+}
+export {};
 </script>
 
 <div

package/dist/components/Former/FormerDrawer.svelte

@@ -1,81 +1,17 @@
-<script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
-  import { registerOverlay } from "../OverlayStack";
-  import Former from "./Former.svelte";
-  import type { FormerProps, FormRequestType } from "./types";
-
-  export 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";
-
-  let backdropZ = $state(1000);
-  let contentZ = $state(1010);
-
-  $effect(() => {
-    if (!opened) {
-      return;
-    }
-
-    const overlay = registerOverlay({ kind: "drawer", mount: "portal" });
-    backdropZ = overlay.layer.backdrop;
-    contentZ = overlay.layer.content;
-
-    return () => {
-      overlay.unregister();
-      backdropZ = 1000;
-      contentZ = 1010;
-    };
-  });
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
+import Former from "./Former.svelte";
+import { createOverlayZIndex, deriveAutoTitle } from "./formerOverlayHelpers.svelte";
+let { afterGet, afterSave, beforeSave, children, id, keepOpen = $bindable(false), layout, onAPICall, onChange, onClose, onConfirmDelete, onError, onOpen, opened = $bindable(false), primeData, request = $bindable("insert"), title, uniqueKeyField = "id", values = $bindable(undefined), width = "32rem" } = $props();
+const autoTitle = $derived(deriveAutoTitle({
+	request,
+	title,
+	uniqueKeyField,
+	values
+}));
+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";
+const overlayZ = createOverlayZIndex("drawer", () => opened);
 </script>
 
 <Dialog
@@ -91,11 +27,11 @@
   <Portal>
     <Dialog.Backdrop
       class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
-      style={`z-index:${backdropZ};`}
+      style={`z-index:${overlayZ.backdropZ};`}
     />
     <Dialog.Positioner
       class="fixed inset-0 flex justify-end"
-      style={`z-index:${contentZ};`}
+      style={`z-index:${overlayZ.contentZ};`}
     >
       <Dialog.Content
         class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token  {animContent}"

package/dist/components/Former/FormerDrawerPreview.svelte

@@ -1,93 +1,104 @@
-<script lang="ts">
-	 
-	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';
-	import Boxer from '../Boxer/Boxer.svelte';
-
-	interface UserForm {
-		id?: number;
-		firstName: string;
-		lastName: string;
-		email: string;
-		password: string;
-		age?: number;
-		role: string;
-		department: string;
-		skills: string[];
-		bio: string;
-		website: string;
-		emailNotifications: boolean;
-		active: boolean;
+<script lang="ts">import FormerDrawer from "./FormerDrawer.svelte";
+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";
+import Boxer from "../Boxer/Boxer.svelte";
+const { request = "insert" } = $props();
+const emptyUser = {
+	firstName: "",
+	lastName: "",
+	email: "",
+	password: "",
+	age: undefined,
+	role: "",
+	department: "",
+	skills: [],
+	bio: "",
+	website: "",
+	emailNotifications: true,
+	active: true
+};
+const filledUser = {
+	id: 1,
+	firstName: "Jane",
+	lastName: "Smith",
+	email: "jane.smith@example.com",
+	password: "",
+	age: 32,
+	role: "admin",
+	department: "engineering",
+	skills: ["typescript", "svelte"],
+	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"
 	}
-
-	export interface Props {
-		request?: FormRequestType;
+];
+const departmentOptions = [
+	{
+		label: "Engineering",
+		value: "engineering"
+	},
+	{
+		label: "Product",
+		value: "product"
+	},
+	{
+		label: "Design",
+		value: "design"
+	},
+	{
+		label: "Marketing",
+		value: "marketing"
+	},
+	{
+		label: "Operations",
+		value: "operations"
 	}
-
-	const { request = 'insert' }: Props = $props();
-
-	const emptyUser: UserForm = {
-		firstName: '',
-		lastName: '',
-		email: '',
-		password: '',
-		age: undefined,
-		role: '',
-		department: '',
-		skills: [],
-		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',
-		skills: ['typescript', 'svelte'],
-		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' },
-	];
-
-	const skillOptions = [
-		{ label: 'Svelte', value: 'svelte' },
-		{ label: 'TypeScript', value: 'typescript' },
-		{ label: 'Node.js', value: 'nodejs' },
-		{ label: 'Testing', value: 'testing' },
-		{ label: 'UX', value: 'ux' },
-	];
-
-	let values = $state<UserForm>(request === 'insert' ? { ...emptyUser } : { ...filledUser });
-	let lastSaved = $state<UserForm | undefined>(undefined);
-	let opened = $state(false);
+];
+const skillOptions = [
+	{
+		label: "Svelte",
+		value: "svelte"
+	},
+	{
+		label: "TypeScript",
+		value: "typescript"
+	},
+	{
+		label: "Node.js",
+		value: "nodejs"
+	},
+	{
+		label: "Testing",
+		value: "testing"
+	},
+	{
+		label: "UX",
+		value: "ux"
+	}
+];
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- initial value is intentional (sets up form state once)
+let values = $state(request === "insert" ? { ...emptyUser } : { ...filledUser });
+let lastSaved = $state(undefined);
+let opened = $state(false);
 </script>
 
 <div class="p-8 space-y-6">
@@ -213,7 +224,6 @@
 					dataSource="local"
 					disablePortal
 					multiSelect
-					searchable
 					clearable
 					placeholder="Search skills..."
 					disabled={isReadonly}

package/dist/components/Former/FormerModal.svelte

@@ -1,75 +1,17 @@
-<script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
-	import { registerOverlay } from '../OverlayStack';
-	import Former from './Former.svelte';
-	import type { FormerProps, FormRequestType } from './types';
-
-	export 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';
-
-	let backdropZ = $state(1000);
-	let contentZ = $state(1010);
-
-	$effect(() => {
-		if (!opened) {
-			return;
-		}
-
-		const overlay = registerOverlay({ kind: 'dialog', mount: 'portal' });
-		backdropZ = overlay.layer.backdrop;
-		contentZ = overlay.layer.content;
-
-		return () => {
-			overlay.unregister();
-			backdropZ = 1000;
-			contentZ = 1010;
-		};
-	});
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Dialog, Portal } from "@skeletonlabs/skeleton-svelte";
+import Former from "./Former.svelte";
+import { createOverlayZIndex, deriveAutoTitle } from "./formerOverlayHelpers.svelte";
+let { afterGet, afterSave, beforeSave, children, id, keepOpen = $bindable(false), layout, onAPICall, onChange, onClose, onConfirmDelete, onError, onOpen, opened = $bindable(false), primeData, request = $bindable("insert"), title, uniqueKeyField = "id", values = $bindable(undefined) } = $props();
+const autoTitle = $derived(deriveAutoTitle({
+	request,
+	title,
+	uniqueKeyField,
+	values
+}));
+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";
+const overlayZ = createOverlayZIndex("dialog", () => opened);
 </script>
 
 <Dialog
@@ -85,9 +27,9 @@
 	<Portal>
 		<Dialog.Backdrop
 			class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
-			style={`z-index:${backdropZ};`}
+			style={`z-index:${overlayZ.backdropZ};`}
 		/>
-		<Dialog.Positioner class="fixed inset-0 flex items-center justify-center p-4" style={`z-index:${contentZ};`}>
+		<Dialog.Positioner class="fixed inset-0 flex items-center justify-center p-4" style={`z-index:${overlayZ.contentZ};`}>
 			<Dialog.Content
 				class="card bg-surface-100-900 shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden {animContent}"
 			>