@svadmin/lite 0.6.0 → 0.7.0

package/dist/components/fields/LiteTreeSelect.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+  }
+
+  interface Props {
+    field?: FieldDefinition;
+    name?: string;
+    label?: string;
+    value?: string | number | (string | number)[];
+    options?: TreeSelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    name = field?.key ?? 'treeSelect',
+    label = field?.label,
+    value,
+    options = [],
+    multiple = false,
+    placeholder,
+    disabled = false,
+    required = field?.required ?? false,
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const hasError = $derived(error.length > 0);
+
+  interface FlatTreeOption {
+    value: string | number;
+    label: string;
+    level: number;
+    disabled?: boolean;
+  }
+
+  function flattenTree(nodes: TreeSelectOption[], level = 0): FlatTreeOption[] {
+    const list: FlatTreeOption[] = [];
+    for (const node of nodes) {
+      list.push({
+        value: node.value,
+        label: node.label,
+        level,
+        disabled: node.disabled,
+      });
+      if (node.children && node.children.length > 0) {
+        list.push(...flattenTree(node.children, level + 1));
+      }
+    }
+    return list;
+  }
+
+  const flattenedOptions = $derived(flattenTree(options));
+
+  function getIndentPrefix(level: number): string {
+    if (level === 0) return '';
+    return '　'.repeat(level) + '├─ ';
+  }
+
+  function formatDisplay(v: unknown): string {
+    if (v == null || v === '') return '—';
+    const values = Array.isArray(v) ? v.map(String) : [String(v)];
+    const labels = values.map((val) => {
+      const match = flattenedOptions.find((o) => String(o.value) === val);
+      return match ? match.label : val;
+    });
+    return labels.join(', ');
+  }
+
+  const selectedValues = $derived(
+    Array.isArray(value) ? value.map(String) : value != null ? [String(value)] : []
+  );
+</script>
+
+{#if mode === 'show'}
+  <span class="lite-badge">{formatDisplay(value)}</span>
+{:else}
+  <div class="lite-form-group">
+    {#if label}
+      <label class="lite-label" for={name}>
+        {label}
+        {#if required}<span class="required">*</span>{/if}
+      </label>
+    {/if}
+    {#if multiple}
+      <select
+        id={name}
+        name="{name}[]"
+        multiple
+        class="lite-select lite-select-multiple {hasError ? 'lite-input-error' : ''}"
+        {disabled}
+        {required}
+        size={Math.min(8, Math.max(4, flattenedOptions.length + 1))}
+      >
+        {#each flattenedOptions as opt (opt.value)}
+          <option
+            value={String(opt.value)}
+            disabled={opt.disabled}
+            selected={selectedValues.includes(String(opt.value))}
+          >
+            {getIndentPrefix(opt.level)}{opt.label}
+          </option>
+        {/each}
+      </select>
+    {:else}
+      <select
+        id={name}
+        {name}
+        class="lite-select {hasError ? 'lite-input-error' : ''}"
+        {disabled}
+        {required}
+      >
+        <option value="">-- {placeholder || t('common.select') || 'Select'} --</option>
+        {#each flattenedOptions as opt (opt.value)}
+          <option
+            value={String(opt.value)}
+            disabled={opt.disabled}
+            selected={selectedValues.includes(String(opt.value))}
+          >
+            {getIndentPrefix(opt.level)}{opt.label}
+          </option>
+        {/each}
+      </select>
+    {/if}
+    {#if hasError}
+      {#each error as err, i (i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { FieldDefinition } from '@svadmin/core';
+export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+}
+interface Props {
+    field?: FieldDefinition;
+    name?: string;
+    label?: string;
+    value?: string | number | (string | number)[];
+    options?: TreeSelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteTreeSelect: import("svelte").Component<Props, {}, "">;
+type LiteTreeSelect = ReturnType<typeof LiteTreeSelect>;
+export default LiteTreeSelect;

package/dist/components/fields/index.d.ts

@@ -13,3 +13,15 @@ export { default as LiteFileField } from './LiteFileField.svelte';
 export { default as LiteRichTextField } from './LiteRichTextField.svelte';
 export { default as LiteMarkdownField } from './LiteMarkdownField.svelte';
 export { default as LiteJsonField } from './LiteJsonField.svelte';
+export { default as LiteAvatarField } from './LiteAvatarField.svelte';
+export { default as LiteCodeField } from './LiteCodeField.svelte';
+export { default as LiteCopyField } from './LiteCopyField.svelte';
+export { default as LiteCurrencyField } from './LiteCurrencyField.svelte';
+export { default as LiteDateRangeField } from './LiteDateRangeField.svelte';
+export { default as LitePercentField } from './LitePercentField.svelte';
+export { default as LitePhoneField } from './LitePhoneField.svelte';
+export { default as LiteRatingField } from './LiteRatingField.svelte';
+export { default as LiteTreeSelect } from './LiteTreeSelect.svelte';
+export type { TreeSelectOption } from './LiteTreeSelect.svelte';
+export { default as LiteCascader } from './LiteCascader.svelte';
+export type { CascaderOption } from './LiteCascader.svelte';

package/dist/components/fields/index.js

@@ -13,3 +13,13 @@ export { default as LiteFileField } from './LiteFileField.svelte';
 export { default as LiteRichTextField } from './LiteRichTextField.svelte';
 export { default as LiteMarkdownField } from './LiteMarkdownField.svelte';
 export { default as LiteJsonField } from './LiteJsonField.svelte';
+export { default as LiteAvatarField } from './LiteAvatarField.svelte';
+export { default as LiteCodeField } from './LiteCodeField.svelte';
+export { default as LiteCopyField } from './LiteCopyField.svelte';
+export { default as LiteCurrencyField } from './LiteCurrencyField.svelte';
+export { default as LiteDateRangeField } from './LiteDateRangeField.svelte';
+export { default as LitePercentField } from './LitePercentField.svelte';
+export { default as LitePhoneField } from './LitePhoneField.svelte';
+export { default as LiteRatingField } from './LiteRatingField.svelte';
+export { default as LiteTreeSelect } from './LiteTreeSelect.svelte';
+export { default as LiteCascader } from './LiteCascader.svelte';

package/dist/components/pages/LiteListPage.svelte

@@ -130,18 +130,20 @@
       </span>
     </div>
 
-    <LiteTable
-      {records}
-      {resource}
-      {currentSort}
-      {currentOrder}
-      {currentSearch}
-      {basePath}
-      canShow={showView}
-      canEdit={showEdit}
-      canDelete={showDelete}
-      {enableBatch}
-    />
+    <div class="lite-table-scroll">
+      <LiteTable
+        {records}
+        {resource}
+        {currentSort}
+        {currentOrder}
+        {currentSearch}
+        {basePath}
+        canShow={showView}
+        canEdit={showEdit}
+        canDelete={showDelete}
+        {enableBatch}
+      />
+    </div>
 
     {#if total > pagination.perPage}
       <LitePagination

package/dist/index.d.ts

@@ -15,6 +15,11 @@ export { default as LiteAlert } from './components/LiteAlert.svelte';
 export { default as LitePermissionMatrix } from './components/LitePermissionMatrix.svelte';
 export { default as LiteAuditLog } from './components/LiteAuditLog.svelte';
 export { default as LiteArrayField } from './components/LiteArrayField.svelte';
+export { default as LiteDynamicFormList } from './components/LiteDynamicFormList.svelte';
+export { default as LiteTransfer } from './components/LiteTransfer.svelte';
+export type { TransferItem } from './components/LiteTransfer.svelte';
+export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.svelte';
+export type { FilterRuleItem } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';

package/dist/index.js

@@ -19,6 +19,9 @@ export { default as LiteAlert } from './components/LiteAlert.svelte';
 export { default as LitePermissionMatrix } from './components/LitePermissionMatrix.svelte';
 export { default as LiteAuditLog } from './components/LiteAuditLog.svelte';
 export { default as LiteArrayField } from './components/LiteArrayField.svelte';
+export { default as LiteDynamicFormList } from './components/LiteDynamicFormList.svelte';
+export { default as LiteTransfer } from './components/LiteTransfer.svelte';
+export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';

package/dist/lite.css

@@ -1066,6 +1066,211 @@ textarea.lite-input {
 .lite-mt-0 { margin-top: 0; }
 .lite-mb-lg { margin-bottom: 24px; }
 
+/* ─── Avatar ───────────────────────────────────────────────── */
+.lite-avatar-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-avatar-container {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.lite-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #f1f5f9;
+  color: #64748b;
+  font-weight: 500;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.lite-avatar-circle { border-radius: 50%; }
+.lite-avatar-square { border-radius: 6px; }
+
+.lite-avatar-xs { width: 20px; height: 20px; font-size: 10px; }
+.lite-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
+.lite-avatar-default { width: 36px; height: 36px; font-size: 14px; }
+.lite-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
+
+.lite-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lite-avatar-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+}
+.lite-avatar-dot-xs { width: 6px; height: 6px; }
+.lite-avatar-dot-sm { width: 8px; height: 8px; }
+.lite-avatar-dot-default { width: 10px; height: 10px; }
+.lite-avatar-dot-lg { width: 12px; height: 12px; }
+
+.lite-avatar-status-online, .lite-avatar-status-success { background: #22c55e; }
+.lite-avatar-status-busy, .lite-avatar-status-error { background: #ef4444; }
+.lite-avatar-status-warning, .lite-avatar-status-away { background: #f59e0b; }
+.lite-avatar-status-offline, .lite-avatar-status-neutral { background: #94a3b8; }
+
+.lite-avatar-text-block {
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 10px;
+  text-align: left;
+  vertical-align: middle;
+}
+.lite-avatar-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #0f172a;
+  line-height: 1.2;
+}
+.lite-avatar-subtitle {
+  font-size: 11px;
+  color: #64748b;
+  line-height: 1.2;
+  margin-top: 2px;
+}
+
+/* ─── Code Block ───────────────────────────────────────────── */
+.lite-code-block {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #f8fafc;
+  overflow: hidden;
+  margin: 4px 0;
+}
+.lite-code-header {
+  padding: 4px 10px;
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+  font-size: 11px;
+}
+.lite-code-pre {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  overflow-y: auto;
+  color: #0f172a;
+}
+
+/* ─── Copy Field ───────────────────────────────────────────── */
+.lite-copy-field {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-copy-text {
+  font-size: 13px;
+  color: #0f172a;
+}
+
+/* ─── Currency & Numbers ───────────────────────────────────── */
+.lite-currency-field {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+/* ─── Date Range ───────────────────────────────────────────── */
+.lite-date-range {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+/* ─── Percentage & Progress ────────────────────────────────── */
+.lite-percent-container {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-progress-track {
+  display: inline-block;
+  width: 64px;
+  height: 6px;
+  background: #e2e8f0;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+.lite-progress-fill {
+  display: block;
+  height: 100%;
+  background: #4f46e5;
+  border-radius: 3px;
+}
+.lite-progress-success { background: #22c55e; }
+.lite-progress-warning { background: #f59e0b; }
+.lite-progress-danger { background: #ef4444; }
+.lite-progress-info { background: #3b82f6; }
+
+/* ─── Phone Field ──────────────────────────────────────────── */
+.lite-phone-container {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+.lite-phone-icon {
+  margin-right: 6px;
+  font-size: 12px;
+}
+.lite-phone-link {
+  color: #4f46e5;
+  font-weight: 500;
+  text-decoration: none;
+}
+.lite-phone-link:hover {
+  text-decoration: underline;
+}
+
+/* ─── Rating Field ─────────────────────────────────────────── */
+.lite-rating-container {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-rating {
+  display: inline-flex;
+  align-items: center;
+}
+.lite-rating-star {
+  display: inline-block;
+  margin-right: 2px;
+  line-height: 1;
+}
+.lite-rating-star-full, .lite-rating-star-half {
+  color: #f59e0b;
+}
+.lite-rating-star-empty {
+  color: #cbd5e1;
+}
+.lite-rating-sm { font-size: 12px; }
+.lite-rating-default { font-size: 14px; }
+.lite-rating-lg { font-size: 18px; }
+.lite-rating-value {
+  margin-left: 6px;
+  font-size: 13px;
+  color: #0f172a;
+  font-weight: 500;
+}
+
+/* ─── Semantic Tone Utilities ──────────────────────────────── */
+.lite-font-mono {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+.lite-text-success { color: #16a34a; font-weight: 500; }
+.lite-text-warning { color: #d97706; font-weight: 500; }
+.lite-text-danger { color: #dc2626; font-weight: 500; }
+.lite-text-info { color: #2563eb; font-weight: 500; }
+.lite-text-primary { color: #4f46e5; font-weight: 500; }
+
 /* ─── Responsive ───────────────────────────────────────────── */
 @media (max-width: 768px) {
   .lite-wrapper {

package/dist/schema-generator.js

@@ -49,6 +49,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
     const issues = [];
     let coerced = value;
     switch (field.type) {
+        case "currency":
         case "number": {
             if (coerced === undefined || coerced === null || coerced === "") {
                 coerced = undefined;
@@ -57,7 +58,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
                 }
             }
             else if (typeof coerced === "string") {
-                const trimmed = coerced.trim();
+                const trimmed = coerced.trim().replace(/^[$€£¥₹]/u, "");
                 if (trimmed === "") {
                     coerced = undefined;
                     if (field.required) {
@@ -251,7 +252,7 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
         }
         case "phone": {
             if (typeof coerced === "string" && coerced.length > 0) {
-                if (!/^[+\d\s()-]*$/.test(coerced)) {
+                if (!/^[+\d\s()-]*$/u.test(coerced)) {
                     issues.push({ path, message: `${field.label} must be a valid phone number` });
                 }
             }
@@ -309,7 +310,13 @@ function coerceAndValidateField(field, value, mode, withinArray = false, path =
             break;
     }
     // Check required
-    if (field.type !== "number" && field.type !== "boolean" && field.type !== "array" && field.type !== "file" && field.type !== "image" && field.type !== "images") {
+    if (field.type !== "number"
+        && field.type !== "currency"
+        && field.type !== "boolean"
+        && field.type !== "array"
+        && field.type !== "file"
+        && field.type !== "image"
+        && field.type !== "images") {
         if (field.required && !hasRequiredValue(coerced)) {
             issues.push({ path, message: `${field.label} is required` });
         }
@@ -339,6 +346,7 @@ export function fieldsToTypeBoxSchema(fields, mode = "create") {
         activeFields.push(field);
         switch (field.type) {
             case "number":
+            case "currency":
                 shape[field.key] = field.required ? Type.Number() : Type.Optional(Type.Number());
                 break;
             case "boolean":
@@ -434,7 +442,9 @@ export const resourceToZodSchema = resourceToTypeBoxSchema;
  */
 export function fieldToInputType(field) {
     switch (field.type) {
-        case "number": return "text";
+        case "number":
+        case "currency": return "text";
+        case "color": return "color";
         case "email": return "text";
         case "url": return "text";
         case "phone": return "tel";
@@ -464,6 +474,7 @@ export function fieldToPlaceholder(field) {
         case "url": return "https://example.com";
         case "phone": return "+1 (555) 000-0000";
         case "number": return "0";
+        case "currency": return "0.00";
         default: return "";
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.56.10",
-    "@svadmin/core": ">=0.34.2 <0.46.0",
+    "@svadmin/core": ">=0.34.2 <0.47.0",
     "@sveltejs/kit": "^2.70.3"
   },
   "dependencies": {
@@ -70,7 +70,8 @@
     "test": "bun run test:components && bun run test:server && bun run test:security",
     "test:components": "vitest run --config ./vitest.config.ts",
     "test:server": "bun test ./src/schema-generator.test.ts ./src/server-adapter.test.ts ./src/fragment-id.test.ts ./src/compatibility.test.ts ./src/ie11-ssr-contract.test.ts",
-    "test:security": "vitest run --config ./src/security.test.config.ts"
+    "test:security": "vitest run --config ./src/security.test.config.ts",
+    "check:parity": "bun ../../scripts/check-parity.ts --write"
   },
   "license": "MIT",
   "publishConfig": {