@svadmin/lite 0.16.11 → 0.22.0

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LitePageHeader: import("svelte").Component<Props, {}, "">;
+type LitePageHeader = ReturnType<typeof LitePageHeader>;
+export default LitePageHeader;

package/dist/components/LitePagination.svelte

@@ -12,9 +12,17 @@
     baseUrl?: string;
     /** Additional parameters to preserve (like sort, order, q) */
     preserveParams?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { page, totalPages, baseUrl = '', preserveParams = {} }: Props = $props();
+  let {
+    page,
+    totalPages,
+    baseUrl = '',
+    preserveParams = {},
+    class: className = '',
+  }: Props = $props();
 
   // Show max 7 page links
   const visiblePages = $derived.by(() => {
@@ -43,7 +51,7 @@
 </script>
 
 {#if totalPages > 1}
-  <nav class="lite-pagination">
+  <nav class="lite-pagination {className}">
     {#if page > 1}
       <a href={pageUrl(page - 1)}>← {t('common.prev') || 'Prev'}</a>
     {:else}

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

@@ -5,6 +5,8 @@ interface Props {
     baseUrl?: string;
     /** Additional parameters to preserve (like sort, order, q) */
     preserveParams?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LitePagination: import("svelte").Component<Props, {}, "">;
 type LitePagination = ReturnType<typeof LitePagination>;

package/dist/components/LitePdfDocumentViewer.svelte

@@ -64,7 +64,7 @@
 <style>
   .sv-lite-pdf-viewer {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -73,26 +73,26 @@
   .sv-lite-pdf-header {
     margin-bottom: 10px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
     padding-bottom: 8px;
-    border-bottom: 1px solid #cbd5e1;
+    border-bottom: 1px solid #E5E6EB;
   }
   .sv-lite-pdf-page {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-left: 8px;
   }
   .sv-lite-pdf-dl {
     float: right;
-    color: #4338ca;
+    color: #0E42D2;
     text-decoration: none;
     font-weight: 600;
   }
   .sv-lite-pdf-embed-wrapper {
     width: 100%;
     height: 600px;
-    background-color: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background-color: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
   }
   .sv-lite-pdf-object {
@@ -102,12 +102,12 @@
   .sv-lite-pdf-fallback {
     padding: 20px;
     text-align: center;
-    color: #64748b;
+    color: #4E5969;
   }
   .sv-lite-pdf-placeholder {
     padding: 20px;
-    background-color: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background-color: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
     text-align: center;
   }
@@ -115,7 +115,7 @@
     display: inline-block;
     width: 400px;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     padding: 20px;
     text-align: left;
     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
@@ -123,13 +123,13 @@
   .sv-lite-stamps {
     margin-top: 15px;
     padding-top: 10px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
   .sv-lite-stamp-badge {
     display: inline-block;
     padding: 2px 6px;
-    background-color: #dcfce7;
-    color: #166534;
+    background-color: #E8FFEA;
+    color: #009A29;
     border-radius: 3px;
     font-size: 10px;
     margin-left: 6px;

package/dist/components/LitePermissionMatrix.svelte

@@ -111,13 +111,13 @@
           {@const section = resourceSection(resource)}
           {#if section && (i === 0 || section !== resourceSection(resources[i-1]))}
             <tr>
-              <td colspan={actions.length + 1} style="background:#f1f5f9;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#475569;">
+              <td colspan={actions.length + 1} style="background:#F2F3F5;font-weight:700;font-size:12px;text-transform:none;letter-spacing:0;color:#4E5969;">
                 {section}
               </td>
             </tr>
           {/if}
           <tr>
-            <td><strong>{resourceLabel(resource)}</strong><br/><small style="color:#94a3b8;">{resourceCode(resource)}</small></td>
+            <td><strong>{resourceLabel(resource)}</strong><br/><small style="color:#86909C;">{resourceCode(resource)}</small></td>
             {#each actions as action, _i (_i)}
               <td style="text-align:center;">
                 <input
@@ -133,7 +133,7 @@
         {/each}
         {#if resources.length === 0}
           <tr>
-            <td colspan={actions.length + 1} style="text-align:center;padding:24px;color:#94a3b8;">
+            <td colspan={actions.length + 1} style="text-align:center;padding:24px;color:#86909C;">
               No resources configured.
             </td>
           </tr>
@@ -154,14 +154,14 @@
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 16px;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid #E5E6EB;
     padding-bottom: 0;
   }
   .lite-role-tab {
     padding: 8px 16px;
     margin-right: 4px;
     text-decoration: none;
-    color: #64748b;
+    color: #4E5969;
     font-size: 14px;
     font-weight: 500;
     border-bottom: 2px solid transparent;
@@ -169,12 +169,12 @@
     transition: color 0.15s ease, border-color 0.15s ease;
   }
   .lite-role-tab:hover {
-    color: #0f172a;
+    color: #1D2129;
     text-decoration: none;
   }
   .lite-role-tab.active {
-    color: #4f46e5;
-    border-bottom-color: #4f46e5;
+    color: #165DFF;
+    border-bottom-color: #165DFF;
     font-weight: 600;
   }
 </style>

package/dist/components/LitePivotTable.svelte

@@ -142,7 +142,7 @@
 <style>
   .sv-lite-pivot-container {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -152,10 +152,10 @@
   .sv-lite-pivot-header {
     margin-bottom: 10px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-pivot-sub {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-left: 8px;
   }
@@ -165,29 +165,29 @@
     text-align: right;
   }
   .sv-lite-pivot-table th, .sv-lite-pivot-table td {
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     padding: 6px 10px;
   }
   .sv-lite-pivot-table thead {
-    background-color: #f8fafc;
-    color: #475569;
+    background-color: #F7F8FA;
+    color: #4E5969;
   }
   .sv-lite-th-dim, .sv-lite-td-dim {
     text-align: left;
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     font-weight: 600;
   }
   .sv-lite-th-total, .sv-lite-td-rowtotal {
-    background-color: #f1f5f9;
+    background-color: #F2F3F5;
     font-weight: 600;
   }
   .sv-lite-pivot-table tfoot {
-    background-color: #f1f5f9;
+    background-color: #F2F3F5;
     font-weight: bold;
-    border-top: 2px solid #cbd5e1;
+    border-top: 2px solid #E5E6EB;
   }
   .sv-lite-td-grandtotal {
-    color: #4338ca;
+    color: #0E42D2;
     font-weight: bold;
   }
 </style>

package/dist/components/LitePopconfirm.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { HTMLFormAttributes } from 'svelte/elements';
+
+  interface Props {
+    id: string;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    href?: string;
+  }
+
+  let {
+    id,
+    title,
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    action,
+    method = 'POST',
+    href,
+  }: Props = $props();
+</script>
+
+<div class="lite-popconfirm">
+  <a class="lite-btn lite-btn-sm" href={`#${id}`}>{title}</a>
+  <div class="lite-popconfirm__panel" id={id} role="dialog" aria-label={title}>
+    {#if description}<p>{description}</p>{/if}
+    <div class="lite-inline-sm">
+      {#if action}
+        <form {method} {action}>
+          <button class="lite-btn lite-btn-primary lite-btn-sm" type="submit">{confirmLabel}</button>
+        </form>
+      {:else if href}
+        <a class="lite-btn lite-btn-primary lite-btn-sm" href={href}>{confirmLabel}</a>
+      {/if}
+      <a class="lite-btn lite-btn-sm" href="#">{cancelLabel}</a>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-popconfirm { display: inline-block; position: relative; }
+  .lite-popconfirm__panel { display: none; position: absolute; z-index: 30; top: 100%; left: 0; width: 18rem; max-width: calc(100vw - 2rem); margin-top: 6px; padding: 12px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(29, 33, 41, 0.16); }
+  .lite-popconfirm__panel:target { display: block; }
+  .lite-popconfirm__panel p { margin: 0 0 8px; color: #4E5969; font-size: 12px; line-height: 1.5; }
+</style>

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

@@ -0,0 +1,14 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface Props {
+    id: string;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    href?: string;
+}
+declare const LitePopconfirm: import("svelte").Component<Props, {}, "">;
+type LitePopconfirm = ReturnType<typeof LitePopconfirm>;
+export default LitePopconfirm;

package/dist/components/LitePresenceAvatarGroup.svelte

@@ -8,15 +8,18 @@
   interface Props {
     users?: LitePresenceUser[];
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     users = [],
     label = 'Viewing now',
+    class: className = ''
   }: Props = $props();
 </script>
 
-<div class="lite-presence-container">
+<div class="lite-presence-container {className}">
   <span class="lite-presence-label">{label}:</span>
   {#each users as user (user.id)}
     <span class="lite-presence-badge" title="{user.name} ({user.status ?? 'online'})">
@@ -24,7 +27,7 @@
     </span>
   {/each}
   {#if users.length === 0}
-    <span style="color: #94a3b8; font-size: 11px;">No active viewers</span>
+    <span style="color: #86909C; font-size: 11px;">No active viewers</span>
   {/if}
 </div>
 
@@ -36,15 +39,15 @@
     margin-bottom: 8px;
   }
   .lite-presence-label {
-    color: #64748b;
+    color: #4E5969;
     margin-right: 6px;
     font-weight: 500;
   }
   .lite-presence-badge {
     display: inline-block;
     padding: 2px 6px;
-    background: #f1f5f9;
-    border: 1px solid #cbd5e1;
+    background: #F2F3F5;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
     margin-right: 4px;
     font-size: 11px;

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

@@ -6,6 +6,8 @@ interface LitePresenceUser {
 interface Props {
     users?: LitePresenceUser[];
     label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LitePresenceAvatarGroup: import("svelte").Component<Props, {}, "">;
 type LitePresenceAvatarGroup = ReturnType<typeof LitePresenceAvatarGroup>;

package/dist/components/LitePrintableBill.svelte

@@ -15,6 +15,8 @@
     customerName: string;
     items?: LiteBillItem[];
     notes?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -25,6 +27,7 @@
     customerName,
     items = [],
     notes,
+    class: className = '',
   }: Props = $props();
 
   const total = $derived(
@@ -32,15 +35,15 @@
   );
 </script>
 
-<div class="lite-bill-card">
+<div class="lite-bill-card {className}">
   <div class="lite-bill-header">
     <div style="float: left;">
       <h3 style="margin: 0;">{title}</h3>
-      <span style="color: #64748b; font-size: 11px;">No: {billNumber}</span>
+      <span style="color: #4E5969; font-size: 11px;">No: {billNumber}</span>
     </div>
     <div style="float: right; text-align: right;">
       <strong>{companyName}</strong>
-      <div style="color: #64748b; font-size: 11px;">Date: {date}</div>
+      <div style="color: #4E5969; font-size: 11px;">Date: {date}</div>
     </div>
     <div style="clear: both;"></div>
   </div>
@@ -74,7 +77,7 @@
     <tfoot>
       <tr>
         <td colspan="4" style="text-align: right; font-weight: bold;">Grand Total:</td>
-        <td style="text-align: right; font-weight: bold; color: #2563eb;">¥{total.toFixed(2)}</td>
+        <td style="text-align: right; font-weight: bold; color: #165DFF;">¥{total.toFixed(2)}</td>
       </tr>
     </tfoot>
   </table>
@@ -89,18 +92,18 @@
 <style>
   .lite-bill-card {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 16px;
   }
   .lite-bill-header {
-    border-bottom: 2px solid #3b82f6;
+    border-bottom: 2px solid #165DFF;
     padding-bottom: 12px;
     margin-bottom: 12px;
   }
   .lite-bill-customer {
-    background: #f8fafc;
+    background: #F7F8FA;
     padding: 8px 12px;
     border-radius: 4px;
     margin-bottom: 16px;
@@ -112,8 +115,8 @@
   }
   .lite-bill-notes {
     font-size: 12px;
-    color: #64748b;
-    border-top: 1px solid #e2e8f0;
+    color: #4E5969;
+    border-top: 1px solid #E5E6EB;
     padding-top: 8px;
   }
 </style>

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

@@ -13,6 +13,8 @@ interface Props {
     customerName: string;
     items?: LiteBillItem[];
     notes?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LitePrintableBill: import("svelte").Component<Props, {}, "">;
 type LitePrintableBill = ReturnType<typeof LitePrintableBill>;

package/dist/components/LiteProgress.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  interface Props {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    tone?: 'default' | 'success' | 'warning' | 'danger';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { value, max = 100, label, showValue = true, tone = 'default',
+    class: className = ''
+  }: Props = $props();
+  const safeMax = $derived(max > 0 ? max : 100);
+  const safeValue = $derived(Math.max(0, Math.min(value, safeMax)));
+  const percent = $derived(Math.round((safeValue / safeMax) * 100));
+</script>
+
+<div class="lite-progress {className}" data-tone={tone}>
+  {#if label || showValue}
+    <div class="lite-progress__meta">
+      {#if label}<span>{label}</span>{/if}
+      {#if showValue}<span>{percent}%</span>{/if}
+    </div>
+  {/if}
+  <progress max={safeMax} value={safeValue}>{percent}%</progress>
+</div>
+
+<style>
+  .lite-progress { display: block; }
+  .lite-progress__meta { display: flex; justify-content: space-between; color: #4E5969; font-size: 12px; }
+  .lite-progress progress { width: 100%; height: 8px; border: 0; border-radius: 999px; background: #F2F3F5; }
+  .lite-progress progress::-webkit-progress-bar { border-radius: 999px; background: #F2F3F5; }
+  .lite-progress progress::-webkit-progress-value { border-radius: 999px; background: #165DFF; }
+  .lite-progress progress::-moz-progress-bar { border-radius: 999px; background: #165DFF; }
+  .lite-progress[data-tone='success'] progress::-webkit-progress-value { background: #00B42A; }
+  .lite-progress[data-tone='success'] progress::-moz-progress-bar { background: #00B42A; }
+  .lite-progress[data-tone='warning'] progress::-webkit-progress-value { background: #FF7D00; }
+  .lite-progress[data-tone='warning'] progress::-moz-progress-bar { background: #FF7D00; }
+  .lite-progress[data-tone='danger'] progress::-webkit-progress-value { background: #F53F3F; }
+  .lite-progress[data-tone='danger'] progress::-moz-progress-bar { background: #F53F3F; }
+
+  .lite-progress progress { margin-top: 4px; }
+  .lite-progress__meta > * + * { margin-left: 8px; }
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    tone?: 'default' | 'success' | 'warning' | 'danger';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteProgress: import("svelte").Component<Props, {}, "">;
+type LiteProgress = ReturnType<typeof LiteProgress>;
+export default LiteProgress;

package/dist/components/LiteQRCode.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import QRCodeLib from 'qrcode';
+
+  interface Props {
+    value: string;
+    size?: number;
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    color?: string;
+    background?: string;
+    ariaLabel?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    value,
+    size = 160,
+    margin = 4,
+    errorCorrectionLevel = 'M',
+    color = '#1D2129',
+    background = '#FFFFFF',
+    ariaLabel = 'QR code',
+    class: className = '',
+  }: Props = $props();
+
+  const matrix = $derived.by(() => {
+    if (!value) return null;
+    try {
+      const qr = QRCodeLib.create(value, { errorCorrectionLevel });
+      const moduleCount = qr.modules.size;
+      const data = qr.modules.data;
+      const total = moduleCount + margin * 2;
+      let path = '';
+      for (let y = 0; y < moduleCount; y += 1) {
+        for (let x = 0; x < moduleCount; x += 1) {
+          if (data[y * moduleCount + x]) path += `M${x + margin} ${y + margin}h1v1h-1z`;
+        }
+      }
+      return { total, path };
+    } catch {
+      return null;
+    }
+  });
+</script>
+
+<figure class="lite-qr-code {className}">
+  {#if matrix}
+    <svg width={size} height={size} viewBox={`0 0 ${matrix.total} ${matrix.total}`} role="img" aria-label={ariaLabel} shape-rendering="crispEdges">
+      <rect width={matrix.total} height={matrix.total} fill={background} />
+      <path d={matrix.path} fill={color} />
+    </svg>
+  {:else}
+    <p class="lite-muted" role="status">No QR content.</p>
+  {/if}
+</figure>
+
+<style>
+  .lite-qr-code { display: inline-flex; margin: 0; padding: 8px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; }
+  .lite-qr-code svg { display: block; max-width: 100%; height: auto; }
+  .lite-qr-code p { margin: 0; padding: 16px; color: #86909C; font-size: 13px; }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    value: string;
+    size?: number;
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    color?: string;
+    background?: string;
+    ariaLabel?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteQRCode: import("svelte").Component<Props, {}, "">;
+type LiteQRCode = ReturnType<typeof LiteQRCode>;
+export default LiteQRCode;

package/dist/components/LiteResizeBox.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    label?: string;
+    children: Snippet;
+  }
+
+  let {
+    width = '100%',
+    height = '240px',
+    minWidth = '12rem',
+    minHeight = '8rem',
+    label = 'Resizable panel',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-resize-box"
+  role="group"
+  aria-label={label}
+  style={`width:${width};height:${height};min-width:${minWidth};min-height:${minHeight}`}
+>
+  {@render children()}
+</div>
+
+<style>
+  .lite-resize-box { overflow: auto; padding: 12px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; resize: both; }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    label?: string;
+    children: Snippet;
+}
+declare const LiteResizeBox: import("svelte").Component<Props, {}, "">;
+type LiteResizeBox = ReturnType<typeof LiteResizeBox>;
+export default LiteResizeBox;