runeforge 0.0.45 → 0.0.47

package/dist/components/crud/Field.svelte

@@ -82,13 +82,46 @@
 		if (!calendarDateEl) return;
 		function handler() {
 			if (fieldDisabled) return;
-			record[field.attribute] = calendarDateEl!.value;
+			setDateTime(calendarDateEl!.value, timePart);
 			datePopoverEl?.hidePopover();
 		}
 		calendarDateEl.addEventListener('change', handler);
 		return () => calendarDateEl?.removeEventListener('change', handler);
 	});
 
+	function pad(n: number): string {
+		return String(n).padStart(2, '0');
+	}
+
+	// `record[field.attribute]` may be empty, a bare "YYYY-MM-DD" (freshly
+	// picked, before any time is set) or a full ISO datetime (loaded from an
+	// existing instance) — parsed once here so the date button, the time
+	// input and cally's own `value` all derive from the same local-time
+	// breakdown instead of each re-parsing the raw string their own way.
+	const parsedDateTime = $derived.by(() => {
+		const raw = record[field.attribute];
+		if (raw == null || raw === '') return null;
+		const d = new Date(String(raw));
+		return isNaN(d.getTime()) ? null : d;
+	});
+	const datePart = $derived(
+		parsedDateTime
+			? `${parsedDateTime.getFullYear()}-${pad(parsedDateTime.getMonth() + 1)}-${pad(parsedDateTime.getDate())}`
+			: ''
+	);
+	const timePart = $derived(
+		parsedDateTime ? `${pad(parsedDateTime.getHours())}:${pad(parsedDateTime.getMinutes())}` : ''
+	);
+	const formattedDatePart = $derived(
+		parsedDateTime
+			? `${pad(parsedDateTime.getDate())}/${pad(parsedDateTime.getMonth() + 1)}/${parsedDateTime.getFullYear()}`
+			: ''
+	);
+
+	function setDateTime(nextDatePart: string, nextTimePart: string) {
+		record[field.attribute] = nextDatePart ? `${nextDatePart}T${nextTimePart || '00:00'}` : '';
+	}
+
 	$effect(() => {
 		if (!field.dependentOptions || isMultiValued) return;
 		const current = record[field.attribute];
@@ -191,16 +224,25 @@
 					value={String(record[field.attribute] ?? '')}
 					disabled={fieldDisabled}
 				/>
-				<button
-					type="button"
-					class="input input-bordered w-full text-left font-normal"
-					class:opacity-40={!record[field.attribute]}
-					disabled={fieldDisabled}
-					popovertarget={datePopId}
-					style="anchor-name:{dateAnchorName}"
-				>
-					{record[field.attribute] ? displayValue : (field.placeholder ?? '')}
-				</button>
+				<div class="flex gap-2">
+					<button
+						type="button"
+						class="input input-bordered w-full text-left font-normal"
+						class:opacity-40={!record[field.attribute]}
+						disabled={fieldDisabled}
+						popovertarget={datePopId}
+						style="anchor-name:{dateAnchorName}"
+					>
+						{record[field.attribute] ? formattedDatePart : (field.placeholder ?? '')}
+					</button>
+					<input
+						type="time"
+						class="input input-bordered w-32 shrink-0"
+						value={timePart}
+						disabled={fieldDisabled || !record[field.attribute]}
+						onchange={(e) => setDateTime(datePart, (e.currentTarget as HTMLInputElement).value)}
+					/>
+				</div>
 				<div
 					popover="auto"
 					id={datePopId}
@@ -211,7 +253,7 @@
 					<calendar-date
 						class="cally"
 						bind:this={calendarDateEl}
-						value={String(record[field.attribute] ?? '')}
+						value={datePart}
 					>
 						<svg
 							aria-label={strings.previous}
@@ -235,6 +277,7 @@
 			{#if readonly}
 				<textarea
 					id={field.attribute}
+					rows={field.rows}
 					class="textarea textarea-bordered bg-base-100 w-full"
 					value={formattedValue}
 					disabled
@@ -243,6 +286,7 @@
 				<textarea
 					id={field.attribute}
 					{name}
+					rows={field.rows}
 					placeholder={field.placeholder ?? ''}
 					bind:value={record[field.attribute]}
 					class="textarea textarea-bordered bg-base-100 w-full"

package/dist/components/crud/utils/resolution.js

@@ -57,6 +57,7 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
         minLength: m.minLength,
         maxLength: m.maxLength,
         pattern: m.pattern,
+        rows: m.rows,
         fields: m.fields ? buildFieldDefinitions(m.fields, data, excludedFlag, new Set()) : undefined,
         itemLabel: m.itemLabel,
         defaultExpanded: m.defaultExpanded,

package/dist/components/crud/views/Create.svelte

@@ -40,13 +40,30 @@
 
   let fieldErrors = $state<Record<string, string>>({});
   let internalError = $state('');
+  let successMessage = $state('');
+  let successTimeout: ReturnType<typeof setTimeout> | undefined;
   let continueCreating = $state(false);
+  let duplicating = $state(false);
+
+  function flashSuccess() {
+    successMessage = strings.saveSuccess;
+    clearTimeout(successTimeout);
+    successTimeout = setTimeout(() => (successMessage = ''), 4000);
+  }
 
   let record = $state<Record<string, unknown>>(untrack(() => emptyRecord(fields)));
 
   const groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
 
+  const continueEnabled = $derived(creation.continue?.enabled ?? true);
+  const continueLabel = $derived(creation.continue?.label ?? strings.saveAndContinue);
+  const continueClass = $derived(creation.continue?.class ?? '');
+
+  const duplicationEnabled = $derived(creation.duplication?.enabled ?? false);
+  const duplicationLabel = $derived(creation.duplication?.label ?? strings.duplicate);
+  const duplicationClass = $derived(creation.duplication?.class ?? '');
+
   const errorEntries = $derived([
     ...((serverError || internalError) ? [['_global', internalError || serverError] as [string, string]] : []),
     ...Object.entries(fieldErrors),
@@ -63,6 +80,15 @@
     ]}
   />
 
+  {#if successMessage}
+    <div role="alert" class="alert alert-success">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+      <span class="text-sm">{successMessage}</span>
+    </div>
+  {/if}
+
   {#if errorEntries.length > 0}
     <div role="alert" class="alert alert-error">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -84,6 +110,8 @@
     use:enhance={({ formData, cancel }) => {
       fieldErrors = {};
       internalError = '';
+      successMessage = '';
+      clearTimeout(successTimeout);
       const errs = validateAll(fields, formData, strings);
       if (Object.keys(errs).length > 0) {
         fieldErrors = errs;
@@ -97,6 +125,11 @@
             record = emptyRecord(fields);
             fieldErrors = {};
             internalError = '';
+            flashSuccess();
+          } else if (duplicating) {
+            fieldErrors = {};
+            internalError = '';
+            flashSuccess();
           } else {
             onSuccess?.();
           }
@@ -145,10 +178,40 @@
       <Button variant="ghost" onclick={() => onCancel?.()}>
         {strings.cancel}
       </Button>
-      <Button type="submit" variant="secondary" onclick={() => (continueCreating = true)}>
-        {strings.saveAndContinue}
-      </Button>
-      <Button type="submit" variant="primary" onclick={() => (continueCreating = false)}>
+      {#if duplicationEnabled}
+        <Button
+          type="submit"
+          variant="warning"
+          class={duplicationClass}
+          onclick={() => {
+            continueCreating = false;
+            duplicating = true;
+          }}
+        >
+          {duplicationLabel}
+        </Button>
+      {/if}
+      {#if continueEnabled}
+        <Button
+          type="submit"
+          variant="secondary"
+          class={continueClass}
+          onclick={() => {
+            continueCreating = true;
+            duplicating = false;
+          }}
+        >
+          {continueLabel}
+        </Button>
+      {/if}
+      <Button
+        type="submit"
+        variant="primary"
+        onclick={() => {
+          continueCreating = false;
+          duplicating = false;
+        }}
+      >
         {strings.save}
       </Button>
     </div>

package/dist/i18n/en.js

@@ -25,8 +25,10 @@ export const en = {
     exportExcel: 'Export as Excel',
     save: 'Save',
     saveAndContinue: 'Save and continue',
+    duplicate: 'Duplicate',
     cancel: 'Cancel',
     back: 'Back',
+    saveSuccess: 'Saved successfully.',
     add: 'Add',
     remove: 'Remove',
     noItems: 'No items added',

package/dist/i18n/es.js

@@ -25,8 +25,10 @@ export const es = {
     exportExcel: 'Exportar a Excel',
     save: 'Guardar',
     saveAndContinue: 'Guardar y continuar',
+    duplicate: 'Duplicar',
     cancel: 'Cancelar',
     back: 'Volver',
+    saveSuccess: 'Guardado correctamente.',
     add: 'Agregar',
     remove: 'Quitar',
     noItems: 'Sin elementos agregados',

package/dist/i18n/types.d.ts

@@ -25,8 +25,13 @@ export interface RuneforgeStrings {
     exportExcel: string;
     save: string;
     saveAndContinue: string;
+    duplicate: string;
     cancel: string;
     back: string;
+    /** Create form only: shown after "Save and continue"/"Duplicate" save
+     * successfully but keep the user on the form (unlike a plain Save, which
+     * navigates away and needs no extra confirmation). */
+    saveSuccess: string;
     add: string;
     remove: string;
     noItems: string;

package/dist/types/attribute.d.ts

@@ -74,6 +74,8 @@ export type AttributeMetadata = {
     minLength?: number;
     maxLength?: number;
     pattern?: string;
+    /** Textarea fields only: the HTML `rows` attribute, controlling height. */
+    rows?: number;
     /** Embedded fields only: schema for each item added through the "+" modal. */
     fields?: InterfaceMetadata<any>;
     /** Embedded fields only: short label for an item in the list. */

package/dist/types/crud.d.ts

@@ -43,6 +43,8 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     minLength?: number;
     maxLength?: number;
     pattern?: string;
+    /** Textarea fields only: the HTML `rows` attribute, controlling height. */
+    rows?: number;
     /** Embedded fields only: sub-field definitions for each item, built from
      * the metadata's `fields`. */
     fields?: FieldDefinition<Record<string, unknown>>[];
@@ -53,12 +55,33 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     /** Fields sharing the same `row` string render side by side. */
     row?: string;
 }
+/** A create-form button whose visibility, label and styling can all be
+ * overridden — `enabled` falls back to the button's own default (see
+ * `continue`/`duplication` on `ActionConfiguration`), `label` falls back to
+ * the matching i18n string, and `class` adds extra classes (e.g. Tailwind
+ * utilities) alongside the button's default variant. */
+export interface CreateFormButtonConfiguration {
+    enabled?: boolean;
+    label?: string;
+    class?: string;
+}
 export interface ActionConfiguration<T extends object = Record<string, unknown>> {
     enabled?: boolean;
     label?: string;
     endpoint?: string;
     confirm?: boolean;
     callback?: (items: T[]) => void | Promise<void>;
+    /** Create form only: the "Save and continue" button, which submits to the
+     * same `endpoint` and then blanks the form so the user can create another
+     * record from scratch. Enabled by default — pass `{ enabled: false }` to
+     * hide it. */
+    continue?: CreateFormButtonConfiguration;
+    /** Create form only: shows a "Duplicate" button alongside Save/Cancel that
+     * submits to the same `endpoint`, but — unlike "Save and continue", which
+     * blanks the form — leaves the just-submitted values in place so the user
+     * can tweak a few fields and save again as a new record. Disabled by
+     * default — pass `{ enabled: true }` to show it. */
+    duplication?: CreateFormButtonConfiguration;
 }
 export interface CustomAction<T extends object = Record<string, unknown>> {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",