@svadmin/lite 0.6.0 → 0.7.0

package/dist/components/fields/LiteCurrencyField.svelte

@@ -0,0 +1,126 @@
+<script module lang="ts">
+  export type LiteCurrencyTone = 'auto' | 'success' | 'warning' | 'destructive' | 'neutral';
+</script>
+
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    compact?: boolean;
+    symbol?: string;
+    colored?: boolean;
+    tone?: LiteCurrencyTone;
+    nullLabel?: string;
+    tabular?: boolean;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    currency = 'USD',
+    locale = 'en-US',
+    precision = 2,
+    compact = false,
+    symbol,
+    colored = false,
+    tone = 'neutral',
+    nullLabel = '—',
+    tabular = true,
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const normalizedPrecision = $derived(
+    Number.isFinite(precision) ? Math.min(20, Math.max(0, Math.trunc(precision))) : 2
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const num = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(num) ? num : null;
+  });
+
+  const formatted = $derived.by(() => {
+    if (numericValue === null) return nullLabel;
+
+    const opts: Intl.NumberFormatOptions = {
+      style: symbol ? 'decimal' : 'currency',
+      currency: symbol ? undefined : currency,
+      minimumFractionDigits: normalizedPrecision,
+      maximumFractionDigits: normalizedPrecision,
+    };
+
+    if (compact) {
+      opts.notation = 'compact';
+      opts.compactDisplay = 'short';
+    }
+
+    try {
+      let res = new Intl.NumberFormat(locale, opts).format(numericValue);
+      if (symbol) {
+        res = `${symbol}${res}`;
+      }
+      return res;
+    } catch {
+      return String(numericValue);
+    }
+  });
+
+  const resolvedTone = $derived.by(() => {
+    if (tone !== 'auto' && tone !== 'neutral') return tone;
+    if ((!colored && tone !== 'auto') || numericValue === null) return 'neutral';
+    if (numericValue > 0) return 'success';
+    if (numericValue < 0) return 'destructive';
+    return 'neutral';
+  });
+
+  const toneClassMap: Record<LiteCurrencyTone, string> = {
+    auto: '',
+    success: 'lite-text-success',
+    warning: 'lite-text-warning',
+    destructive: 'lite-text-danger',
+    neutral: '',
+  };
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if numericValue === null}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span
+      class="lite-currency-field {tabular ? 'lite-font-mono' : ''} {toneClassMap[resolvedTone]} {className}"
+    >
+      {formatted}
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="number"
+      step="any"
+      name={field?.key ?? 'currency_amount'}
+      id={field?.key ?? 'currency_amount'}
+      value={numericValue ?? ''}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? '0.00'}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteCurrencyField.svelte.d.ts

@@ -0,0 +1,21 @@
+export type LiteCurrencyTone = 'auto' | 'success' | 'warning' | 'destructive' | 'neutral';
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    compact?: boolean;
+    symbol?: string;
+    colored?: boolean;
+    tone?: LiteCurrencyTone;
+    nullLabel?: string;
+    tabular?: boolean;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteCurrencyField: import("svelte").Component<Props, {}, "">;
+type LiteCurrencyField = ReturnType<typeof LiteCurrencyField>;
+export default LiteCurrencyField;

package/dist/components/fields/LiteDateRangeField.svelte

@@ -0,0 +1,147 @@
+<script module lang="ts">
+  export type LiteDateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+  export type LiteDateRangeValue =
+    | [string | number | Date | null | undefined, string | number | Date | null | undefined]
+    | { start?: string | number | Date | null; end?: string | number | Date | null; from?: string | number | Date | null; to?: string | number | Date | null }
+    | null
+    | undefined;
+</script>
+
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: LiteDateRangeValue;
+    startDate?: string | number | Date | null;
+    endDate?: string | number | Date | null;
+    separator?: string;
+    locale?: string;
+    format?: LiteDateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    startDate,
+    endDate,
+    separator = '~',
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const start = $derived.by(() => {
+    if (startDate !== undefined) return startDate;
+    if (Array.isArray(value)) return value[0];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.start ?? obj.from) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  const end = $derived.by(() => {
+    if (endDate !== undefined) return endDate;
+    if (Array.isArray(value)) return value[1];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.end ?? obj.to) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  function formatDate(val: string | number | Date | null | undefined): string | null {
+    if (val == null || val === '') return null;
+    const d = val instanceof Date ? val : new Date(val);
+    if (isNaN(d.getTime())) return null;
+
+    if (format === 'iso') return d.toISOString();
+
+    const defaultOptions: Intl.DateTimeFormatOptions =
+      options ??
+      (format === 'datetime'
+        ? { dateStyle: 'medium', timeStyle: 'short' }
+        : format === 'time'
+          ? { timeStyle: 'medium' }
+          : { dateStyle: 'medium' });
+
+    try {
+      return new Intl.DateTimeFormat(locale, defaultOptions).format(d);
+    } catch {
+      return d.toLocaleDateString();
+    }
+  }
+
+  function toIsoDateInput(val: string | number | Date | null | undefined): string {
+    if (val == null || val === '') return '';
+    try {
+      const d = val instanceof Date ? val : new Date(val);
+      if (isNaN(d.getTime())) return '';
+      return d.toISOString().split('T')[0] ?? '';
+    } catch {
+      return '';
+    }
+  }
+
+  const startFormatted = $derived(formatDate(start));
+  const endFormatted = $derived(formatDate(end));
+
+  const display = $derived.by(() => {
+    if (!startFormatted && !endFormatted) return nullLabel;
+    if (startFormatted && endFormatted) return `${startFormatted} ${separator} ${endFormatted}`;
+    if (startFormatted) return `${startFormatted} ${separator} ${nullLabel}`;
+    return `${nullLabel} ${separator} ${endFormatted}`;
+  });
+
+  const hasError = $derived(error.length > 0);
+  const startKey = $derived(field ? `${field.key}_start` : 'start_date');
+  const endKey = $derived(field ? `${field.key}_end` : 'end_date');
+</script>
+
+{#if mode === 'show'}
+  <span class="lite-date-range {className}">
+    <span>{display}</span>
+  </span>
+{:else}
+  <div>
+    <div class="lite-inline-sm" style="display: flex; align-items: center;">
+      <input
+        type="date"
+        name={startKey}
+        id={startKey}
+        value={toIsoDateInput(start)}
+        class="lite-input {hasError ? 'lite-input-error' : ''}"
+        style="flex: 1; min-width: 120px;"
+        placeholder="Start date"
+        {...field?.required ? { required: true } : {}}
+      />
+      <span style="margin: 0 8px; color: #64748b;">{separator}</span>
+      <input
+        type="date"
+        name={endKey}
+        id={endKey}
+        value={toIsoDateInput(end)}
+        class="lite-input {hasError ? 'lite-input-error' : ''}"
+        style="flex: 1; min-width: 120px;"
+        placeholder="End date"
+        {...field?.required ? { required: true } : {}}
+      />
+    </div>
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteDateRangeField.svelte.d.ts

@@ -0,0 +1,26 @@
+export type LiteDateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+export type LiteDateRangeValue = [string | number | Date | null | undefined, string | number | Date | null | undefined] | {
+    start?: string | number | Date | null;
+    end?: string | number | Date | null;
+    from?: string | number | Date | null;
+    to?: string | number | Date | null;
+} | null | undefined;
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: LiteDateRangeValue;
+    startDate?: string | number | Date | null;
+    endDate?: string | number | Date | null;
+    separator?: string;
+    locale?: string;
+    format?: LiteDateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteDateRangeField: import("svelte").Component<Props, {}, "">;
+type LiteDateRangeField = ReturnType<typeof LiteDateRangeField>;
+export default LiteDateRangeField;

package/dist/components/fields/LitePercentField.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+  export type LitePercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+</script>
+
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: LitePercentTone;
+    nullLabel?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    precision = 1,
+    scale = '100',
+    showProgress = false,
+    tone = 'neutral',
+    nullLabel = '—',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const normalizedPrecision = $derived(
+    Math.min(20, Math.max(0, Math.trunc(Number.isFinite(precision) ? precision : 1)))
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  });
+
+  const percentNumber = $derived.by(() => {
+    if (numericValue === null) return null;
+    const scaled = scale === '1' ? numericValue * 100 : numericValue;
+    return Number.isFinite(scaled) ? scaled : null;
+  });
+
+  const formatted = $derived(
+    percentNumber === null ? nullLabel : `${percentNumber.toFixed(normalizedPrecision)}%`
+  );
+
+  const resolvedTone = $derived.by((): LitePercentTone => {
+    if (tone !== 'auto') return tone;
+    if (percentNumber === null) return 'neutral';
+    if (percentNumber >= 80) return 'success';
+    if (percentNumber >= 50) return 'warning';
+    return 'destructive';
+  });
+
+  const toneTextClassMap: Record<LitePercentTone, string> = {
+    auto: '',
+    success: 'lite-text-success',
+    warning: 'lite-text-warning',
+    destructive: 'lite-text-danger',
+    info: 'lite-text-info',
+    neutral: '',
+  };
+
+  const toneProgressClassMap: Record<LitePercentTone, string> = {
+    auto: '',
+    success: 'lite-progress-success',
+    warning: 'lite-progress-warning',
+    destructive: 'lite-progress-danger',
+    info: 'lite-progress-info',
+    neutral: '',
+  };
+
+  const clampedProgress = $derived(
+    percentNumber === null ? 0 : Math.min(100, Math.max(0, percentNumber))
+  );
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if percentNumber === null}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span class="lite-percent-container {className}">
+      <span class="lite-font-mono {toneTextClassMap[resolvedTone]}">
+        {formatted}
+      </span>
+      {#if showProgress}
+        <span class="lite-progress-track">
+          <span
+            class="lite-progress-fill {toneProgressClassMap[resolvedTone]}"
+            style="width: {clampedProgress}%;"
+          ></span>
+        </span>
+      {/if}
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="number"
+      step="any"
+      name={field?.key ?? 'percent'}
+      id={field?.key ?? 'percent'}
+      value={percentNumber ?? ''}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? '0.0%'}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LitePercentField.svelte.d.ts

@@ -0,0 +1,17 @@
+export type LitePercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: LitePercentTone;
+    nullLabel?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LitePercentField: import("svelte").Component<Props, {}, "">;
+type LitePercentField = ReturnType<typeof LitePercentField>;
+export default LitePercentField;

package/dist/components/fields/LitePhoneField.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: string | number | null;
+    href?: string;
+    showIcon?: boolean;
+    clickable?: boolean;
+    copyable?: boolean;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    href,
+    showIcon = true,
+    clickable = true,
+    nullLabel = '—',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const stringValue = $derived.by(() => {
+    if (value == null || value === '') return null;
+    const str = String(value).trim();
+    return str.length > 0 ? str : null;
+  });
+
+  const telHref = $derived.by(() => {
+    if (!stringValue) return undefined;
+    const candidate = (href ?? stringValue).replace(/^tel:/i, '');
+    const normalized = candidate.replace(/[\s().-]/g, '');
+    if (!/^\+?\d+$/.test(normalized)) return undefined;
+    return `tel:${normalized}`;
+  });
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if !stringValue}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span class="lite-phone-container {className}">
+      {#if showIcon}
+        <span class="lite-phone-icon">📞</span>
+      {/if}
+      {#if clickable && telHref}
+        <a href={telHref} class="lite-phone-link">
+          {stringValue}
+        </a>
+      {:else}
+        <span>{stringValue}</span>
+      {/if}
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="tel"
+      name={field?.key ?? 'phone'}
+      id={field?.key ?? 'phone'}
+      value={stringValue ?? ''}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? '+1 (555) 000-0000'}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LitePhoneField.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: string | number | null;
+    href?: string;
+    showIcon?: boolean;
+    clickable?: boolean;
+    copyable?: boolean;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LitePhoneField: import("svelte").Component<Props, {}, "">;
+type LitePhoneField = ReturnType<typeof LitePhoneField>;
+export default LitePhoneField;

package/dist/components/fields/LiteRatingField.svelte

@@ -0,0 +1,105 @@
+<script module lang="ts">
+  export type LiteRatingSize = 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    max?: number;
+    showValue?: boolean;
+    size?: LiteRatingSize;
+    nullLabel?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    max = 5,
+    showValue = false,
+    size = 'default',
+    nullLabel = '—',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const normalizedMax = $derived(
+    Number.isFinite(max) ? Math.min(100, Math.max(1, Math.trunc(max))) : 5
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(parsed)) return null;
+    return Math.max(0, Math.min(normalizedMax, parsed));
+  });
+
+  const stars = $derived.by(() => {
+    if (numericValue === null) return [];
+    const result: ('full' | 'half' | 'empty')[] = [];
+    for (let index = 1; index <= normalizedMax; index += 1) {
+      if (numericValue >= index) {
+        result.push('full');
+      } else if (numericValue >= index - 0.5) {
+        result.push('half');
+      } else {
+        result.push('empty');
+      }
+    }
+    return result;
+  });
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if numericValue === null}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span class="lite-rating-container {className}">
+      <span class="lite-rating lite-rating-{size}" role="img" aria-label={`${numericValue} out of ${normalizedMax}`}>
+        {#each stars as starType, idx (idx)}
+          {#if starType === 'full'}
+            <span class="lite-rating-star lite-rating-star-full">★</span>
+          {:else if starType === 'half'}
+            <span class="lite-rating-star lite-rating-star-half">★</span>
+          {:else}
+            <span class="lite-rating-star lite-rating-star-empty">☆</span>
+          {/if}
+        {/each}
+      </span>
+      {#if showValue}
+        <span class="lite-rating-value lite-font-mono">
+          {numericValue}
+        </span>
+      {/if}
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="number"
+      min="0"
+      max={normalizedMax}
+      step="0.5"
+      name={field?.key ?? 'rating'}
+      id={field?.key ?? 'rating'}
+      value={numericValue ?? ''}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? `0 - ${normalizedMax}`}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteRatingField.svelte.d.ts

@@ -0,0 +1,16 @@
+export type LiteRatingSize = 'sm' | 'default' | 'lg';
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: number | string | null;
+    max?: number;
+    showValue?: boolean;
+    size?: LiteRatingSize;
+    nullLabel?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteRatingField: import("svelte").Component<Props, {}, "">;
+type LiteRatingField = ReturnType<typeof LiteRatingField>;
+export default LiteRatingField;