@svadmin/lite 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "SSR-compatible lightweight admin UI for @svadmin — zero client-side JS, works in IE11",
   "type": "module",
   "files": [
@@ -25,8 +25,9 @@
     "@sveltejs/kit": "^2.0.0"
   },
   "dependencies": {
-    "sveltekit-superforms": "^2.22.0",
-    "zod": "^3.24.0"
+    "lucide-svelte": "^1.0.1",
+    "sveltekit-superforms": "^2.30.1",
+    "zod": "^4.3.6"
   },
   "license": "MIT",
   "publishConfig": {

package/src/components/LiteArrayField.svelte

@@ -34,7 +34,7 @@
     <div class="lite-array-item" style="border:1px solid #e2e8f0;border-radius:6px;padding:12px;margin-bottom:8px;background:#f8fafc;">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
         <span style="font-size:12px;font-weight:600;color:#94a3b8;">#{i + 1}</span>
-        <button type="button" class="lite-btn lite-btn-sm" style="color:#dc2626;border-color:#fecaca;" onclick="this.closest('.lite-array-item').remove()">
+        <button type="button" class="lite-btn lite-btn-sm" style="color:#dc2626;border-color:#fecaca;" onclick={(e) => (e.currentTarget as HTMLElement).closest('.lite-array-item')?.remove()}>
           Remove
         </button>
       </div>
@@ -91,10 +91,11 @@
     <p style="text-align:center;padding:16px;color:#94a3b8;font-size:14px;">No items added yet.</p>
   {/if}
 
-  <button type="button" class="lite-btn" style="margin-top:4px;" onclick="
-    const template = this.previousElementSibling?.previousElementSibling?.cloneNode(true);
-    if (template) this.parentElement.insertBefore(template, this.previousElementSibling);
-  ">
+  <button type="button" class="lite-btn" style="margin-top:4px;" onclick={(e) => {
+    const target = e.currentTarget as HTMLElement;
+    const template = target.previousElementSibling?.previousElementSibling?.cloneNode(true);
+    if (template && target.parentElement) target.parentElement.insertBefore(template, target.previousElementSibling);
+  }}>
     + Add Item
   </button>
 </fieldset>

package/src/components/LiteConfirmDialog.svelte

@@ -48,7 +48,7 @@
         type="button"
         class="lite-btn lite-btn-sm"
         style="margin-right:8px;"
-        onclick="this.closest('details').removeAttribute('open')"
+        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
       >
         {cancelLabel}
       </button>

package/src/components/buttons/LiteDeleteButton.svelte

@@ -45,7 +45,7 @@
       <button 
         type="button" 
         class="lite-btn lite-btn-sm" 
-        onclick="this.closest('details').removeAttribute('open')"
+        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
       >
         {t('common.cancel') || 'Cancel'}
       </button>

package/src/components/buttons/LiteImportButton.svelte

@@ -37,7 +37,7 @@
         <button 
           type="button" 
           class="lite-btn lite-btn-sm" 
-          onclick="this.closest('details').removeAttribute('open')"
+          onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
         >
           {t('common.cancel') || 'Cancel'}
         </button>

package/src/components/fields/LiteBooleanField.svelte

@@ -30,7 +30,7 @@
     <input type="hidden" name={field.key} value="false" />
     
     <label for={field.key}>
-      {field.placeholder ?? (field.label || 'Yes')}
+      {(field as any).placeholder ?? (field.label || 'Yes')}
     </label>
     {#if hasError}
       {#each error as err}

package/src/components/fields/LiteEmailField.svelte

@@ -28,7 +28,7 @@
       id={field.key}
       value={String(value ?? '')}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={field.placeholder ?? field.label}
+      placeholder={(field as any).placeholder ?? field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/fields/LiteFileField.svelte

@@ -29,8 +29,8 @@
     {/each}
   </div>
 {:else}
+  {@const files = getFiles(value)}
   <div>
-    {@const files = getFiles(value)}
     {#if files.length > 0 && mode === 'edit'}
       <div style="margin-bottom: 8px;">
         <span style="font-size: 12px;">Current files: {files.length}</span>
@@ -41,7 +41,7 @@
       name={field.key}
       id={field.key}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...field.type === 'files' ? { multiple: true } : {}}
+      {...(field.type as string) === 'files' ? { multiple: true } : {}}
       {...field.required && !files.length ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/fields/LiteImageField.svelte

@@ -29,8 +29,8 @@
     {/each}
   </div>
 {:else}
+  {@const urls = getUrls(value)}
   <div>
-    {@const urls = getUrls(value)}
     {#if urls.length > 0 && mode === 'edit'}
       <div style="margin-bottom: 8px; display:flex; gap: 8px;">
         {#each urls as url}
@@ -45,7 +45,7 @@
       id={field.key}
       accept="image/*"
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...field.type === 'images' ? { multiple: true } : {}}
+      {...(field.type as string) === 'images' ? { multiple: true } : {}}
       {...field.required && !urls.length ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/fields/LiteJsonField.svelte

@@ -31,7 +31,7 @@
       id={field.key}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
       style="min-height: 150px; font-family: monospace;"
-      placeholder="{}"
+      placeholder="{}"
       {...field.required ? { required: true } : {}}
     >{getJsonString(value)}</textarea>
     {#if hasError}

package/src/components/fields/LiteNumberField.svelte

@@ -22,7 +22,7 @@
       id={field.key}
       value={value == null ? '' : Number(value)}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={field.placeholder ?? field.label}
+      placeholder={(field as any).placeholder ?? field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/fields/LiteRelationField.svelte

@@ -18,7 +18,7 @@
     if (v == null) return '—';
     if (typeof v === 'object' && v !== null && 'id' in v) {
       // It's a populated relation object
-      const labelField = field.relation?.labelField || 'name';
+      const labelField = (field as any).relation?.labelField || 'name';
       return String((v as Record<string, unknown>)[labelField] || (v as Record<string, unknown>).id);
     }
     // Try options

package/src/components/fields/LiteTextField.svelte

@@ -22,7 +22,7 @@
       id={field.key}
       value={String(value ?? '')}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={field.placeholder ?? field.label}
+      placeholder={(field as any).placeholder ?? field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/fields/LiteUrlField.svelte

@@ -15,7 +15,7 @@
 {#if mode === 'show'}
   <span>
     {#if value}
-      <a href="{value}" target="_blank" rel="noopener noreferrer">{value}</a>
+      <a href="{String(value)}" target="_blank" rel="noopener noreferrer">{value}</a>
     {:else}
       —
     {/if}
@@ -28,7 +28,7 @@
       id={field.key}
       value={String(value ?? '')}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={field.placeholder ?? field.label}
+      placeholder={(field as any).placeholder ?? field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/src/components/pages/LiteListPage.svelte

@@ -49,7 +49,7 @@
 
   <div class="lite-card" style="margin-bottom: 20px;">
     <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
-      <LiteSearch defaultValue={currentSearch} placeholder={t('common.search') || 'Search...'} />
+      <LiteSearch value={currentSearch} placeholder={t('common.search') || 'Search...'} />
       <span style="font-size: 13px; color: #64748b;">
         {t('common.total') || 'Total'}: {total}
       </span>
@@ -69,8 +69,7 @@
     {#if total > pagination.perPage}
       <LitePagination
         page={pagination.page}
-        perPage={pagination.perPage}
-        {total}
+        totalPages={Math.ceil(total / pagination.perPage)}
       />
     {/if}
   </div>

package/src/schema-generator.ts

@@ -15,7 +15,7 @@ function fieldToZod(field: FieldDefinition): z.ZodTypeAny {
 
   switch (field.type) {
     case 'number':
-      schema = z.coerce.number({ invalid_type_error: `${field.label} must be a number` });
+      schema = z.coerce.number({ message: `${field.label} must be a number` });
       break;
     case 'boolean':
       schema = z.coerce.boolean();
@@ -36,7 +36,7 @@ function fieldToZod(field: FieldDefinition): z.ZodTypeAny {
       if (field.options?.length) {
         schema = z.enum(
           field.options.map((o: { value: string | number }) => String(o.value)) as [string, ...string[]],
-          { errorMap: () => ({ message: `${field.label} must be one of the options` }) },
+          { message: `${field.label} must be one of the options` },
         );
       } else {
         schema = z.string();