@svadmin/lite 0.3.10 → 0.3.13

package/dist/components/LiteTable.svelte

@@ -5,6 +5,7 @@
    */
   import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
+  import { isExplicitBooleanTrue } from '../value-normalization';
 
   interface Props {
     records: Record<string, unknown>[];
@@ -14,6 +15,7 @@
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
+    canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
   }
@@ -25,11 +27,15 @@
     currentOrder = 'asc',
     currentSearch,
     basePath = '/lite',
-    canEdit = true,
-    canDelete = true,
+    canShow,
+    canEdit,
+    canDelete,
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? 'id');
+  const showView = $derived(canShow ?? resource.canShow !== false);
+  const showEdit = $derived(canEdit ?? resource.canEdit !== false);
+  const showDelete = $derived(canDelete ?? resource.canDelete !== false);
   const listFields = $derived(
     resource.fields.filter(f => f.showInList !== false)
   );
@@ -53,12 +59,13 @@
       try { return new Date(value as string).toLocaleDateString(); } catch { return String(value); }
     }
     if (field.type === 'select' && field.options) {
-      const opt = field.options.find(o => o.value === value);
+      const opt = field.options.find(o => String(o.value) === String(value));
       return opt?.label ?? String(value);
     }
     if (Array.isArray(value)) return value.join(', ');
     return String(value);
   }
+
 </script>
 
 <table class="lite-table">
@@ -76,7 +83,7 @@
           {/if}
         </th>
       {/each}
-      {#if canEdit || canDelete}
+      {#if showView || showEdit || showDelete}
         <th style="text-align:right;">{t('common.actions') || 'Actions'}</th>
       {/if}
     </tr>
@@ -88,7 +95,7 @@
         {#each listFields as field, _i (_i)}
           <td>
             {#if field.type === 'boolean'}
-              <span class="lite-bool {record[field.key] ? 'lite-bool-true' : ''}"></span>
+              <span class="lite-bool {isExplicitBooleanTrue(record[field.key]) ? 'lite-bool-true' : ''}"></span>
             {:else if field.type === 'tags' && Array.isArray(record[field.key])}
               {#each (record[field.key] as string[]).slice(0, 3) as tag, _i (_i)}
                 <span class="lite-badge">{tag}</span>
@@ -100,12 +107,15 @@
             {/if}
           </td>
         {/each}
-        {#if canEdit || canDelete}
+        {#if showView || showEdit || showDelete}
           <td class="actions">
-            {#if canEdit}
+            {#if showView}
+              <a href={`${basePath}/${resource.name}/show/${id}`} class="lite-btn lite-btn-sm">{t('common.show') || 'Show'}</a>
+            {/if}
+            {#if showEdit}
               <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-sm">{t('common.edit') || 'Edit'}</a>
             {/if}
-            {#if canDelete}
+            {#if showDelete}
               <!-- Delete uses <details> for no-JS confirmation -->
               <details class="lite-confirm-details">
                 <summary class="lite-btn lite-btn-sm lite-btn-danger">{t('common.delete') || 'Delete'}</summary>
@@ -123,7 +133,7 @@
       </tr>
     {:else}
       <tr>
-        <td colspan={listFields.length + (canEdit || canDelete ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
+        <td colspan={listFields.length + (showView || showEdit || showDelete ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
           {t('common.noData') || 'No records found.'}
         </td>
       </tr>

package/dist/components/LiteTable.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props {
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
+    canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
 }

package/dist/components/advanced/LiteVirtualTable.svelte

@@ -15,6 +15,7 @@
     currentOrder?: 'asc' | 'desc';
     currentSearch?: string;
     basePath?: string;
+    canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
   }
@@ -26,8 +27,9 @@
     currentOrder = 'asc',
     currentSearch,
     basePath = '/lite',
-    canEdit = true,
-    canDelete = true,
+    canShow,
+    canEdit,
+    canDelete,
   }: Props = $props();
 </script>
 
@@ -39,6 +41,7 @@
   {currentOrder}
   {currentSearch}
   {basePath}
+  {canShow}
   {canEdit}
   {canDelete}
 />

package/dist/components/advanced/LiteVirtualTable.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     currentOrder?: 'asc' | 'desc';
     currentSearch?: string;
     basePath?: string;
+    canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
 }

package/dist/components/buttons/LiteCloneButton.svelte

@@ -26,8 +26,8 @@
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.clone') || 'Clone'}
 >
-  <Copy class="h-4 w-4" />
+  <Copy size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.clone') || 'Clone'}</span>
+    <span style="margin-left: 4px">{t('common.clone') || 'Clone'}</span>
   {/if}
 </a>

package/dist/components/buttons/LiteCreateButton.svelte

@@ -24,8 +24,8 @@
   class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.create') || 'Create'}
 >
-  <Plus class="h-4 w-4" />
+  <Plus size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.create') || 'Create'}</span>
+    <span style="margin-left: 4px">{t('common.create') || 'Create'}</span>
   {/if}
 </a>

package/dist/components/buttons/LiteDeleteButton.svelte

@@ -28,9 +28,9 @@
     class="lite-btn lite-btn-danger {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.delete') || 'Delete'}
   >
-    <Trash2 class="h-4 w-4" />
+    <Trash2 size={16} />
     {#if !hideText}
-      <span style="marginLeft: 4px">{t('common.delete') || 'Delete'}</span>
+      <span style="margin-left: 4px">{t('common.delete') || 'Delete'}</span>
     {/if}
   </summary>
   <div class="lite-confirm-panel" style="right: 0; left: auto;">

package/dist/components/buttons/LiteEditButton.svelte

@@ -26,8 +26,8 @@
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.edit') || 'Edit'}
 >
-  <Pencil class="h-4 w-4" />
+  <Pencil size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.edit') || 'Edit'}</span>
+    <span style="margin-left: 4px">{t('common.edit') || 'Edit'}</span>
   {/if}
 </a>

package/dist/components/buttons/LiteExportButton.svelte

@@ -24,8 +24,8 @@
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.export') || 'Export'}
 >
-  <Download class="h-4 w-4" />
+  <Download size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.export') || 'Export'}</span>
+    <span style="margin-left: 4px">{t('common.export') || 'Export'}</span>
   {/if}
 </a>

package/dist/components/buttons/LiteImportButton.svelte

@@ -24,9 +24,9 @@
     class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.import') || 'Import'}
   >
-    <Upload class="h-4 w-4" />
+    <Upload size={16} />
     {#if !hideText}
-      <span style="marginLeft: 4px">{t('common.import') || 'Import'}</span>
+      <span style="margin-left: 4px">{t('common.import') || 'Import'}</span>
     {/if}
   </summary>
   <div class="lite-confirm-panel">

package/dist/components/buttons/LiteListButton.svelte

@@ -24,8 +24,8 @@
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.list') || 'List'}
 >
-  <List class="h-4 w-4" />
+  <List size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.list') || 'List'}</span>
+    <span style="margin-left: 4px">{t('common.list') || 'List'}</span>
   {/if}
 </a>

package/dist/components/buttons/LiteRefreshButton.svelte

@@ -14,21 +14,17 @@
     size = 'default'
   }: Props = $props();
 
-  function refreshPage() {
-    if (typeof window !== 'undefined') {
-      window.location.reload();
-    }
-  }
 </script>
 
-<button
-  type="button"
+<!-- The empty URL intentionally reloads the exact current document, including its query string. -->
+<!-- svelte-ignore a11y_invalid_attribute -->
+<a
+  href=""
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.refresh') || 'Refresh'}
-  onclick={refreshPage}
 >
-  <RefreshCw class="h-4 w-4" />
+  <RefreshCw size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.refresh') || 'Refresh'}</span>
+    <span style="margin-left: 4px">{t('common.refresh') || 'Refresh'}</span>
   {/if}
-</button>
+</a>

package/dist/components/buttons/LiteSaveButton.svelte

@@ -20,8 +20,8 @@
   class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.save') || 'Save'}
 >
-  <Save class="h-4 w-4" />
+  <Save size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.save') || 'Save'}</span>
+    <span style="margin-left: 4px">{t('common.save') || 'Save'}</span>
   {/if}
 </button>

package/dist/components/buttons/LiteShowButton.svelte

@@ -26,8 +26,8 @@
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.show') || 'Show'}
 >
-  <Eye class="h-4 w-4" />
+  <Eye size={16} />
   {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.show') || 'Show'}</span>
+    <span style="margin-left: 4px">{t('common.show') || 'Show'}</span>
   {/if}
 </a>

package/dist/components/fields/LiteBooleanField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import type { FieldDefinition } from '@svadmin/core';
+  import { isExplicitBooleanTrue } from '../../value-normalization';
 
   interface Props {
     field: FieldDefinition;
@@ -11,12 +11,14 @@
 
   let { field, value, error = [], mode = 'show' }: Props = $props();
   let hasError = $derived(error.length > 0);
+
+  const checked = $derived(isExplicitBooleanTrue(value));
 </script>
 
 {#if mode === 'show'}
   <div>
-    <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
-    {value ? '✓ Yes' : '✗ No'}
+    <span class="lite-bool {checked ? 'lite-bool-true' : ''}"></span>
+    {checked ? '✓ Yes' : '✗ No'}
   </div>
 {:else}
   <div class="lite-checkbox-group">
@@ -24,15 +26,14 @@
       type="checkbox"
       name={field.key}
       id={field.key}
-      checked={!!value}
+      checked={checked}
       value="true"
     />
-    <!-- Fallback hidden input so unchecked boxes submit "false" -->
-    <input type="hidden" name={field.key} value="false" />
-    
     <label for={field.key}>
-      {(field as any).placeholder ?? (field.label || 'Yes')}
+      {field.label || 'Yes'}
     </label>
+    <!-- Keep the label adjacent for the CSS checked/focus selector. -->
+    <input type="hidden" name={field.key} value="false" />
     {#if hasError}
       {#each error as err, _i (_i)}
         <div class="lite-error-text">{err}</div>

package/dist/components/fields/LiteDateField.svelte

@@ -14,7 +14,7 @@
   function formatDate(v: unknown): string {
     if (!v) return '';
     try {
-      return new Date(v as string).toISOString().substring(0, 16); // Formats for html datetime-local
+      return new Date(v as string).toISOString().substring(0, 16);
     } catch {
       return '';
     }
@@ -23,7 +23,7 @@
   function displayDate(v: unknown): string {
     if (!v) return '—';
     try {
-      return new Date(v as string).toLocaleString();
+      return new Date(v as string).toLocaleDateString();
     } catch {
       return String(v);
     }

package/dist/components/fields/LiteEmailField.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import type { FieldDefinition } from '@svadmin/core';
 
   interface Props {
@@ -29,7 +28,7 @@
       id={field.key}
       value={String(value ?? '')}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={(field as any).placeholder ?? field.label}
+      placeholder={field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/dist/components/fields/LiteImageField.svelte

@@ -31,23 +31,32 @@
 {:else}
   {@const urls = getUrls(value)}
   <div>
-    {#if urls.length > 0 && mode === 'edit'}
+    {#if urls.length > 0}
       <div style="margin-bottom: 8px; display:flex; gap: 8px;">
         {#each urls as url, _i (_i)}
           <img src={url} alt="Current" style="height: 60px; border-radius: 4px; border: 1px solid #e5e7eb; opacity: 0.6;" />
         {/each}
       </div>
-      <p style="font-size: 11px; color:#6b7280; margin: 0 0 4px;">Uploading new ones will overwrite.</p>
     {/if}
-    <input
-      type="file"
-      name={field.key}
-      id={field.key}
-      accept="image/*"
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...(field.type as string) === 'images' ? { multiple: true } : {}}
-      {...field.required && !urls.length ? { required: true } : {}}
-    />
+    {#if field.type === 'images'}
+      <textarea
+        name={field.key}
+        id={field.key}
+        class="lite-input {hasError ? 'lite-input-error' : ''}"
+        placeholder="One image URL per line"
+        required={field.required}
+      >{urls.join('\n')}</textarea>
+    {:else}
+      <input
+        type="text"
+        name={field.key}
+        id={field.key}
+        value={urls[0] ?? ''}
+        placeholder="https://example.com/image.jpg"
+        class="lite-input {hasError ? 'lite-input-error' : ''}"
+        required={field.required}
+      />
+    {/if}
     {#if hasError}
       {#each error as err, _i (_i)}
         <div class="lite-error-text">{err}</div>

package/dist/components/fields/LiteNumberField.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import type { FieldDefinition } from '@svadmin/core';
 
   interface Props {
@@ -23,7 +22,7 @@
       id={field.key}
       value={value == null ? '' : Number(value)}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={(field as any).placeholder ?? field.label}
+      placeholder={field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/dist/components/fields/LiteRelationField.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import type { FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
 
@@ -17,10 +16,13 @@
   // passed through options, or just standard inputs requesting ID.
   function displayRelation(v: unknown): string {
     if (v == null) return '—';
-    if (typeof v === 'object' && v !== null && 'id' in v) {
-      // It's a populated relation object
-      const labelField = (field as any).relation?.labelField || 'name';
-      return String((v as Record<string, unknown>)[labelField] || (v as Record<string, unknown>).id);
+    if (typeof v === 'object' && v !== null) {
+      const record = v as Record<string, unknown>;
+      const idField = field.optionValue ?? 'id';
+      const labelField = field.optionLabel ?? 'name';
+      if (record[idField] != null) {
+        return String(record[labelField] ?? record[idField]);
+      }
     }
     // Try options
     const opt = field.options?.find(o => String(o.value) === String(v));
@@ -38,10 +40,14 @@
         name={field.key}
         id={field.key}
         class="lite-select {hasError ? 'lite-input-error' : ''}"
+        value={typeof value === 'object' && value
+          ? String((value as Record<string, unknown>)[field.optionValue ?? 'id'] ?? '')
+          : String(value ?? '')}
+        required={field.required}
       >
         <option value="">-- {t('common.select') || 'Select'} Reference --</option>
         {#each field.options as opt, _i (_i)}
-          <option value={String(opt.value)} selected={String(value) === String(opt.value)}>
+          <option value={String(opt.value)}>
             {opt.label}
           </option>
         {/each}
@@ -52,7 +58,9 @@
         type="text"
         name={field.key}
         id={field.key}
-        value={typeof value === 'object' && value ? String((value as Record<string, unknown>).id || '') : String(value ?? '')}
+        value={typeof value === 'object' && value
+          ? String((value as Record<string, unknown>)[field.optionValue ?? 'id'] ?? '')
+          : String(value ?? '')}
         class="lite-input {hasError ? 'lite-input-error' : ''}"
         placeholder="Enter reference ID"
         {...field.required ? { required: true } : {}}

package/dist/components/fields/LiteSelectField.svelte

@@ -27,12 +27,13 @@
       name={field.key}
       id={field.key}
       class="lite-select {hasError ? 'lite-input-error' : ''}"
+      value={String(value ?? '')}
       {...field.required ? { required: true } : {}}
     >
       <option value="">-- {t('common.select') || 'Select'} --</option>
       {#if field.options}
         {#each field.options as opt, _i (_i)}
-          <option value={String(opt.value)} selected={String(value) === String(opt.value)}>
+          <option value={String(opt.value)}>
             {opt.label}
           </option>
         {/each}

package/dist/components/fields/LiteTextField.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import type { FieldDefinition } from '@svadmin/core';
 
   interface Props {
@@ -23,7 +22,7 @@
       id={field.key}
       value={String(value ?? '')}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={(field as any).placeholder ?? field.label}
+      placeholder={field.label}
       {...field.required ? { required: true } : {}}
     />
     {#if hasError}

package/dist/components/fields/LiteUrlField.svelte

@@ -13,11 +13,7 @@
   let hasError = $derived(error.length > 0);
   let displayValue = $derived(toSafeText(value));
   let safeHref = $derived(toSafeHref(value));
-  const placeholder = $derived(
-    'placeholder' in field && typeof field.placeholder === 'string'
-      ? field.placeholder
-      : field.label
-  );
+  const placeholder = $derived(field.label);
 </script>
 
 {#if mode === 'show'}

package/dist/components/layout/LiteCatchAllNavigate.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   interface Props {
     basePath?: string;
     defaultResource?: string;
@@ -8,13 +6,9 @@
 
   let { basePath = '/lite', defaultResource = '' }: Props = $props();
   const target = $derived(`${basePath}${defaultResource ? '/' + defaultResource : ''}`);
-
-  onMount(() => {
-    window.location.href = target;
-  });
 </script>
 
-<noscript>
+<svelte:head>
   <meta http-equiv="refresh" content={`0; url=${target}`} />
-</noscript>
-<p>Redirecting...</p>
+</svelte:head>
+<p>Redirecting to <a href={target}>{target}</a>...</p>

package/dist/components/layout/LiteNavigateToResource.svelte

@@ -1,25 +1,14 @@
 <script lang="ts">
-  /**
-   * SSR redirection helper component
-   * Normally redirection is done via +page.server.ts load() function in SvelteKit.
-   * This component will do a client-side fallback redirect if rendered.
-   */
-  import { onMount } from 'svelte';
-
   interface Props {
     resource: string;
     basePath?: string;
   }
 
   let { resource, basePath = '/lite' }: Props = $props();
-
-  onMount(() => {
-    // Only fires if JS somehow runs, otherwise server should have redirected.
-    window.location.href = `${basePath}/${resource}`;
-  });
+  const target = $derived(`${basePath}/${resource}`);
 </script>
 
-<noscript>
-  <meta http-equiv="refresh" content={`0; url=${basePath}/${resource}`} />
-</noscript>
-<p>Redirecting to {resource}...</p>
+<svelte:head>
+  <meta http-equiv="refresh" content={`0; url=${target}`} />
+</svelte:head>
+<p>Redirecting to <a href={target}>{resource}</a>...</p>

package/dist/components/layout/LiteSidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+  import { filterVisibleMenu, filterVisibleResources } from '../../menu-visibility';
 
   interface Props {
     resources: ResourceDefinition[];
@@ -8,6 +9,7 @@
     userName?: string;
     basePath?: string;
     menu?: MenuItem[];
+    canAccess?: (resource: string, action: string) => boolean;
   }
 
   let {
@@ -17,11 +19,13 @@
     userName = '',
     basePath = '/lite',
     menu,
+    canAccess,
   }: Props = $props();
 
-  const menuResources = $derived(
-    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
-  );
+  const menuResources = $derived(filterVisibleResources(resources, canAccess));
+
+  const hasCustomMenu = $derived(menu !== undefined);
+  const visibleMenu = $derived(menu ? filterVisibleMenu(menu, canAccess) : []);
 
   function isActive(href: string | undefined): boolean {
     if (!href) return false;
@@ -36,8 +40,8 @@
 
 <nav class="lite-sidebar">
   <div class="lite-sidebar-brand">{brandName}</div>
-  {#if menu && menu.length > 0}
-    {#each menu as item, _i (_i)}
+  {#if hasCustomMenu}
+    {#each visibleMenu as item, _i (_i)}
       {#if item.children && item.children.length > 0}
         <details class="lite-menu-group" open={hasActiveChild(item.children)}>
           <summary class="lite-menu-parent">{item.label ?? item.name}</summary>

package/dist/components/layout/LiteSidebar.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     userName?: string;
     basePath?: string;
     menu?: MenuItem[];
+    canAccess?: (resource: string, action: string) => boolean;
 }
 declare const LiteSidebar: import("svelte").Component<Props, {}, "">;
 type LiteSidebar = ReturnType<typeof LiteSidebar>;