vlite3 1.0.10 → 1.1.2

package/components/Invoice/types.d.ts

@@ -0,0 +1,97 @@
+export type InvoiceVariant = 'Variant1' | 'Variant2' | 'Variant3' | 'Variant4';
+export interface InvoiceCustomerInfo {
+    name: string;
+    address?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: string;
+    email?: string;
+    phone?: string;
+    taxId?: string;
+    [key: string]: any;
+}
+export interface InvoiceCompanyInfo {
+    name: string;
+    address?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: string;
+    email?: string;
+    phone?: string;
+    website?: string;
+    taxId?: string;
+    [key: string]: any;
+}
+export interface InvoiceLineItem {
+    id: string | number;
+    /** Thumbnail image URL for the product */
+    thumbnail?: string;
+    /** Product SKU */
+    sku?: string;
+    name: string;
+    description?: string;
+    /** Product size or variation */
+    size?: string;
+    quantity: number;
+    price: number;
+    /** Discount amount applied to this line item */
+    discount?: number;
+    /** Optional label for the discount, e.g. "10% OFF" */
+    discountLabel?: string;
+    total: number;
+    [key: string]: any;
+}
+export interface InvoiceTotal {
+    label: string;
+    value: number;
+    isGrandTotal?: boolean;
+    isSubtotal?: boolean;
+    isTax?: boolean;
+    isDiscount?: boolean;
+}
+export interface InvoiceData {
+    /** Reference to the image URL for the brand logo */
+    brandLogo?: string;
+    /** Title such as "INVOICE" or "RECEIPT" */
+    brandTitle?: string;
+    /** Name of the brand or company issuing the invoice */
+    brandName?: string;
+    /** The physical/contact info of the issuer */
+    companyInfo?: InvoiceCompanyInfo;
+    invoiceNumber: string;
+    /** The status string to display, e.g., "Paid", "Pending" */
+    status?: string;
+    /** Issue date of the invoice */
+    issuedDate?: string | Date;
+    /** Due date of the invoice */
+    dueDate?: string | Date;
+    /** Customer details */
+    customerInfo?: InvoiceCustomerInfo;
+    /** Array of line items */
+    items: InvoiceLineItem[];
+    /** Array of totals to display at the bottom */
+    totals: InvoiceTotal[];
+    /** A barcode string */
+    barcode?: string;
+    /** A QR Code string */
+    qrcode?: string;
+    /** Additional notes at the bottom of the invoice */
+    notes?: string;
+    /** Footer text, usually for terms and conditions */
+    footerText?: string;
+}
+export interface InvoiceProps {
+    data: InvoiceData;
+    variant?: InvoiceVariant;
+    /**
+     * When true, reduces padding, spacing, and font sizes across the invoice
+     * for a more compact, print-friendly layout that uses less paper.
+     */
+    compact?: boolean;
+    /**
+     * Whether to display the text value underneath the barcode
+     */
+    displayBarcodeValue?: boolean;
+}

package/components/List/List.vue.d.ts

@@ -1,15 +1,7 @@
 import { ListProps } from './types';
 declare function __VLS_template(): any;
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListProps> & Readonly<{}>, {
-    class: string;
-    variant: import('./types').ListVariant;
-    loading: boolean;
-    columns: import('./types').ListColumns;
-    showColon: boolean;
-    stackedBorderStyle: import('./types').StackedBorderStyle;
-    skeletonRows: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/List/List.vue.js

@@ -1,21 +1,22 @@
-import { defineComponent as J, useSlots as K, computed as h, openBlock as r, createElementBlock as n, normalizeClass as C, renderSlot as p, createBlock as x, createCommentVNode as k, createElementVNode as d, toDisplayString as N, Fragment as f, renderList as g, unref as S, isMemoSame as B, createSlots as j, withCtx as L, mergeProps as M } from "vue";
-import Q from "../Icon.vue.js";
-import F from "./ListFieldRow.vue.js";
-import { $t as U } from "../../utils/i18n.js";
-import { getObjectValue as I } from "./utils.js";
-const W = {
+import { defineComponent as X, computed as u, useSlots as Y, openBlock as r, createElementBlock as o, normalizeClass as C, renderSlot as x, createBlock as S, createCommentVNode as h, createElementVNode as d, toDisplayString as Z, Fragment as f, renderList as g, unref as L, isMemoSame as M, createSlots as R, withCtx as F, mergeProps as V } from "vue";
+import ee from "../Icon.vue.js";
+import D from "./ListFieldRow.vue.js";
+import { $t as te } from "../../utils/i18n.js";
+import { getComponentConfig as re } from "../../utils/configUtils.js";
+import { getObjectValue as $ } from "./utils.js";
+const le = {
   key: 0,
   class: "px-3 py-2.5 border-b border-border/70 flex items-center gap-2 bg-muted/60"
-}, X = { class: "text-sm font-semibold text-gray-900 tracking-tight" }, Y = { class: "sm:hidden" }, Z = { class: "hidden sm:block" }, _ = { class: "sm:hidden" }, ee = { class: "hidden sm:block" }, te = {
+}, oe = { class: "text-sm font-semibold text-gray-900 tracking-tight" }, se = { class: "sm:hidden" }, ne = { class: "hidden sm:block" }, ae = { class: "sm:hidden" }, ue = { class: "hidden sm:block" }, de = {
   key: 0,
   class: "px-3 py-8 text-center text-sm text-muted-foreground"
-}, re = { key: 1 }, oe = { key: 2 }, le = {
+}, ie = { key: 1 }, ve = { key: 2 }, me = {
   key: 1,
   class: "px-3 py-8 text-center text-sm text-muted-foreground"
-}, ne = {
+}, ce = {
   key: 3,
   class: "border-t border-border/70 px-3 py-2.5"
-}, me = /* @__PURE__ */ J({
+}, pe = /* @__PURE__ */ X({
   __name: "List",
   props: {
     fields: {},
@@ -23,42 +24,42 @@ const W = {
     title: {},
     titleI18n: {},
     titleIcon: {},
-    columns: { default: 2 },
-    variant: { default: "default" },
-    class: { default: "" },
-    showColon: { type: Boolean, default: !0 },
-    loading: { type: Boolean, default: !1 },
-    skeletonRows: { default: 6 },
-    stackedBorderStyle: { default: "none" }
+    columns: {},
+    variant: {},
+    class: {},
+    showColon: { type: Boolean },
+    loading: { type: Boolean },
+    skeletonRows: {},
+    stackedBorderStyle: {}
   },
-  setup(s) {
-    const o = s, G = K(), y = h(() => o.fields.filter((l) => {
-      const u = I(l.key, o.data);
-      return l.whenTrue && !u ? !1 : l.when ? l.when(u, o.data) : !0;
-    })), i = h(() => {
-      if (o.columns === 1)
-        return { left: [], right: [], full: y.value };
-      const l = [], u = [], t = [];
-      for (const m of y.value) {
-        if (m.lineByLine) {
-          t.push(m);
+  setup(B) {
+    const a = B, I = re("list") || {}, k = u(() => a.columns ?? I.columns ?? 2), y = u(() => a.variant ?? I.variant ?? "default"), J = u(() => a.class ?? I.class ?? ""), p = u(() => a.showColon ?? I.showColon ?? !0), K = u(() => a.skeletonRows ?? I.skeletonRows ?? 6), T = u(() => a.stackedBorderStyle ?? I.stackedBorderStyle ?? "none"), N = Y(), w = u(() => a.fields.filter((l) => {
+      const n = $(l.key, a.data);
+      return l.whenTrue && !n ? !1 : l.when ? l.when(n, a.data) : !0;
+    })), i = u(() => {
+      if (k.value === 1)
+        return { left: [], right: [], full: w.value };
+      const l = [], n = [], t = [];
+      for (const v of w.value) {
+        if (v.lineByLine) {
+          t.push(v);
           continue;
         }
-        l.length <= u.length ? l.push(m) : u.push(m);
+        l.length <= n.length ? l.push(v) : n.push(v);
       }
-      const e = Math.abs(l.length - u.length);
+      const e = Math.abs(l.length - n.length);
       if (e >= 2) {
-        const m = l.length > u.length ? l : u, a = m.splice(m.length - Math.floor(e / 2));
-        t.unshift(...a);
+        const v = l.length > n.length ? l : n, s = v.splice(v.length - Math.floor(e / 2));
+        t.unshift(...s);
       }
-      if (o.columns === 2 && l.length === u.length + 1) {
-        const m = l.pop();
-        t.unshift(m);
+      if (k.value === 2 && l.length === n.length + 1) {
+        const v = l.pop();
+        t.unshift(v);
       }
-      return { left: l, right: u, full: t };
-    }), D = h(() => i.value.full.length > 0), P = h(
+      return { left: l, right: n, full: t };
+    }), O = u(() => i.value.full.length > 0), Q = u(
       () => i.value.left.length > 0 || i.value.right.length > 0
-    ), E = h(() => o.titleI18n ? U(o.titleI18n) : o.title ?? ""), O = h(() => o.variant === "stacked"), q = h(() => {
+    ), z = u(() => a.titleI18n ? te(a.titleI18n) : a.title ?? ""), A = u(() => y.value === "stacked"), U = u(() => {
       const l = {
         default: "border border-border rounded",
         card: "border border-border rounded bg-card shadow-sm",
@@ -70,230 +71,230 @@ const W = {
       };
       return [
         "list-component w-full overflow-hidden",
-        l[o.variant] ?? l.default,
-        o.class
+        l[y.value] ?? l.default,
+        J.value
       ].join(" ");
-    }), R = h(() => o.columns === 1 ? "grid grid-cols-1" : o.columns === 3 ? "grid grid-cols-1 md:grid-cols-3" : "grid grid-cols-1 md:grid-cols-2"), T = h(() => o.columns === 1 ? "" : "border-r border-border/70"), z = h(() => o.columns === 1 ? 1 : o.columns === 3 ? 3 : 2), A = h(() => o.columns === 1 ? "grid grid-cols-1 pb-2.5 pt-1 px-1" : o.columns === 3 ? "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 pb-2.5 pt-1 px-1" : "grid grid-cols-1 sm:grid-cols-2 pb-2.5 pt-1 px-1"), $ = h(
-      () => Object.keys(G).filter((l) => !["title", "header", "footer"].includes(l))
-    ), V = h(() => Array.from({ length: o.skeletonRows }));
-    function H(l) {
-      return o.stackedBorderStyle === "divider" && l % z.value !== 0 ? "flex flex-col gap-1.5 py-2 border-l border-border pl-4 pr-3.5" : "flex flex-col gap-1.5 px-3.5 py-2";
+    }), G = u(() => k.value === 1 ? "grid grid-cols-1" : k.value === 3 ? "grid grid-cols-1 md:grid-cols-3" : "grid grid-cols-1 md:grid-cols-2"), P = u(() => k.value === 1 ? "" : "border-r border-border/70"), q = u(() => k.value === 1 ? 1 : k.value === 3 ? 3 : 2), H = u(() => k.value === 1 ? "grid grid-cols-1 pb-2.5 pt-1 px-1" : k.value === 3 ? "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 pb-2.5 pt-1 px-1" : "grid grid-cols-1 sm:grid-cols-2 pb-2.5 pt-1 px-1"), j = u(
+      () => Object.keys(N).filter((l) => !["title", "header", "footer"].includes(l))
+    ), E = u(() => Array.from({ length: K.value }));
+    function W(l) {
+      return T.value === "divider" && l % q.value !== 0 ? "flex flex-col gap-1.5 py-2 border-l border-border pl-4 pr-3.5" : "flex flex-col gap-1.5 px-3.5 py-2";
     }
-    return (l, u) => (r(), n("div", {
-      class: C(q.value),
+    return (l, n) => (r(), o("div", {
+      class: C(U.value),
       role: "table",
       "aria-label": "Information list"
     }, [
-      E.value || s.titleIcon || l.$slots.title ? (r(), n("div", W, [
-        p(l.$slots, "title", {}, () => [
-          s.titleIcon ? (r(), x(Q, {
+      z.value || B.titleIcon || l.$slots.title ? (r(), o("div", le, [
+        x(l.$slots, "title", {}, () => [
+          B.titleIcon ? (r(), S(ee, {
             key: 0,
-            icon: s.titleIcon,
+            icon: B.titleIcon,
             class: "w-4 h-4 text-muted-foreground shrink-0"
-          }, null, 8, ["icon"])) : k("", !0),
-          d("h3", X, N(E.value), 1)
+          }, null, 8, ["icon"])) : h("", !0),
+          d("h3", oe, Z(z.value), 1)
         ])
-      ])) : k("", !0),
-      s.loading ? (r(), n(f, { key: 1 }, [
-        O.value ? (r(), n(f, { key: 0 }, [
-          d("div", Y, [
-            (r(!0), n(f, null, g(V.value, (t, e) => (r(), n("div", {
+      ])) : h("", !0),
+      B.loading ? (r(), o(f, { key: 1 }, [
+        A.value ? (r(), o(f, { key: 0 }, [
+          d("div", se, [
+            (r(!0), o(f, null, g(E.value, (t, e) => (r(), o("div", {
               key: "sk-sm-" + e,
               class: "flex justify-between gap-3 px-3 py-2.5 border-b border-border/70 last:border-b-0"
-            }, [...u[10] || (u[10] = [
+            }, [...n[10] || (n[10] = [
               d("div", { class: "h-4 w-1/3 rounded bg-muted animate-pulse" }, null, -1),
               d("div", { class: "h-4 w-2/5 rounded bg-muted/60 animate-pulse" }, null, -1)
             ])]))), 128))
           ]),
-          d("div", Z, [
+          d("div", ne, [
             d("div", {
-              class: C(A.value)
+              class: C(H.value)
             }, [
-              (r(!0), n(f, null, g(V.value, (t, e) => (r(), n("div", {
+              (r(!0), o(f, null, g(E.value, (t, e) => (r(), o("div", {
                 key: "sk-s-" + e,
-                class: C(H(e))
-              }, [...u[11] || (u[11] = [
+                class: C(W(e))
+              }, [...n[11] || (n[11] = [
                 d("div", { class: "h-3 w-1/3 rounded bg-muted/60 animate-pulse" }, null, -1),
                 d("div", { class: "h-4 w-2/3 rounded bg-muted animate-pulse" }, null, -1)
               ])], 2))), 128))
             ], 2)
           ])
-        ], 64)) : (r(), n("div", {
+        ], 64)) : (r(), o("div", {
           key: 1,
-          class: C(R.value)
+          class: C(G.value)
         }, [
           d("div", null, [
-            (r(!0), n(f, null, g(V.value, (t, e) => (r(), n("div", {
+            (r(!0), o(f, null, g(E.value, (t, e) => (r(), o("div", {
               key: "sk-l-" + e,
               class: "flex justify-between gap-3 px-3 py-2.5 border-b border-border/70 last:border-b-0"
-            }, [...u[12] || (u[12] = [
+            }, [...n[12] || (n[12] = [
               d("div", { class: "h-4 w-1/3 rounded bg-muted animate-pulse" }, null, -1),
               d("div", { class: "h-4 w-2/5 rounded bg-muted/60 animate-pulse" }, null, -1)
             ])]))), 128))
           ]),
-          s.columns !== 1 ? (r(), n("div", {
+          k.value !== 1 ? (r(), o("div", {
             key: 0,
-            class: C(T.value)
+            class: C(P.value)
           }, [
-            (r(!0), n(f, null, g(V.value, (t, e) => (r(), n("div", {
+            (r(!0), o(f, null, g(E.value, (t, e) => (r(), o("div", {
               key: "sk-r-" + e,
               class: "flex justify-between gap-3 px-3 py-2.5 border-b border-border/70 last:border-b-0"
-            }, [...u[13] || (u[13] = [
+            }, [...n[13] || (n[13] = [
               d("div", { class: "h-4 w-1/3 rounded bg-muted animate-pulse" }, null, -1),
               d("div", { class: "h-4 w-2/5 rounded bg-muted/60 animate-pulse" }, null, -1)
             ])]))), 128))
-          ], 2)) : k("", !0)
+          ], 2)) : h("", !0)
         ], 2))
-      ], 64)) : (r(), n(f, { key: 2 }, [
-        O.value ? (r(), n(f, { key: 0 }, [
-          d("div", _, [
-            (r(!0), n(f, null, g(y.value, (t, e, m, a) => {
-              const v = [t, S(I)(t.key, o.data), s.variant, s.showColon];
-              if (a && a.key === "mob-" + t.key + e && B(a, v)) return a;
-              const c = (r(), x(F, {
+      ], 64)) : (r(), o(f, { key: 2 }, [
+        A.value ? (r(), o(f, { key: 0 }, [
+          d("div", ae, [
+            (r(!0), o(f, null, g(w.value, (t, e, v, s) => {
+              const m = [t, L($)(t.key, a.data), y.value, p.value];
+              if (s && s.key === "mob-" + t.key + e && M(s, m)) return s;
+              const c = (r(), S(D, {
                 key: "mob-" + t.key + e,
                 field: t,
-                data: o.data,
+                data: a.data,
                 index: e,
                 variant: "default",
-                "show-colon": s.showColon,
-                "is-last": e === y.value.length - 1,
-                "show-border-bottom": e < y.value.length - 1
-              }, j({ _: 2 }, [
-                g($.value, (b) => ({
+                "show-colon": p.value,
+                "is-last": e === w.value.length - 1,
+                "show-border-bottom": e < w.value.length - 1
+              }, R({ _: 2 }, [
+                g(j.value, (b) => ({
                   name: b,
-                  fn: L((w) => [
-                    p(l.$slots, b, M({ ref_for: !0 }, w))
+                  fn: F((_) => [
+                    x(l.$slots, b, V({ ref_for: !0 }, _))
                   ])
                 }))
               ]), 1032, ["field", "data", "index", "show-colon", "is-last", "show-border-bottom"]));
-              return c.memo = v, c;
-            }, u, 0), 128))
+              return c.memo = m, c;
+            }, n, 0), 128))
           ]),
-          d("div", ee, [
+          d("div", ue, [
             d("div", {
-              class: C(A.value)
+              class: C(H.value)
             }, [
-              (r(!0), n(f, null, g(y.value, (t, e, m, a) => {
-                const v = [t, S(I)(t.key, o.data), s.variant, s.showColon];
-                if (a && a.key === t.key + e && B(a, v)) return a;
-                const c = (r(), x(F, {
+              (r(!0), o(f, null, g(w.value, (t, e, v, s) => {
+                const m = [t, L($)(t.key, a.data), y.value, p.value];
+                if (s && s.key === t.key + e && M(s, m)) return s;
+                const c = (r(), S(D, {
                   key: t.key + e,
                   field: t,
-                  data: o.data,
+                  data: a.data,
                   index: e,
-                  variant: s.variant,
+                  variant: y.value,
                   "show-colon": !1,
-                  "is-last": e === y.value.length - 1,
+                  "is-last": e === w.value.length - 1,
                   "show-border-bottom": !1,
-                  "stacked-col-index": e % z.value,
-                  "stacked-border-style": s.stackedBorderStyle
-                }, j({ _: 2 }, [
-                  g($.value, (b) => ({
+                  "stacked-col-index": e % q.value,
+                  "stacked-border-style": T.value
+                }, R({ _: 2 }, [
+                  g(j.value, (b) => ({
                     name: b,
-                    fn: L((w) => [
-                      p(l.$slots, b, M({ ref_for: !0 }, w))
+                    fn: F((_) => [
+                      x(l.$slots, b, V({ ref_for: !0 }, _))
                     ])
                   }))
                 ]), 1032, ["field", "data", "index", "variant", "is-last", "stacked-col-index", "stacked-border-style"]));
-                return c.memo = v, c;
-              }, u, 2), 128))
+                return c.memo = m, c;
+              }, n, 2), 128))
             ], 2)
           ]),
-          y.value.length === 0 ? (r(), n("div", te, " No information to display. ")) : k("", !0)
-        ], 64)) : (r(), n(f, { key: 1 }, [
+          w.value.length === 0 ? (r(), o("div", de, " No information to display. ")) : h("", !0)
+        ], 64)) : (r(), o(f, { key: 1 }, [
           d("div", {
-            class: C(R.value)
+            class: C(G.value)
           }, [
-            i.value.left.length > 0 ? (r(), n("div", {
+            i.value.left.length > 0 ? (r(), o("div", {
               key: 0,
-              class: C(T.value)
+              class: C(P.value)
             }, [
-              (r(!0), n(f, null, g(i.value.left, (t, e, m, a) => {
-                const v = [t, S(I)(t.key, o.data), s.variant, s.showColon];
-                if (a && a.key === t.key + e && B(a, v)) return a;
-                const c = (r(), x(F, {
+              (r(!0), o(f, null, g(i.value.left, (t, e, v, s) => {
+                const m = [t, L($)(t.key, a.data), y.value, p.value];
+                if (s && s.key === t.key + e && M(s, m)) return s;
+                const c = (r(), S(D, {
                   key: t.key + e,
                   field: t,
-                  data: o.data,
+                  data: a.data,
                   index: e,
-                  variant: s.variant,
-                  "show-colon": s.showColon,
+                  variant: y.value,
+                  "show-colon": p.value,
                   "is-last": e === i.value.left.length - 1,
-                  "show-border-bottom": e < i.value.left.length - 1 || e === i.value.left.length - 1 && !D.value
-                }, j({ _: 2 }, [
-                  g($.value, (b) => ({
+                  "show-border-bottom": e < i.value.left.length - 1 || e === i.value.left.length - 1 && !O.value
+                }, R({ _: 2 }, [
+                  g(j.value, (b) => ({
                     name: b,
-                    fn: L((w) => [
-                      p(l.$slots, b, M({ ref_for: !0 }, w))
+                    fn: F((_) => [
+                      x(l.$slots, b, V({ ref_for: !0 }, _))
                     ])
                   }))
                 ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]));
-                return c.memo = v, c;
-              }, u, 4), 128))
-            ], 2)) : k("", !0),
-            s.columns !== 1 && i.value.right.length > 0 ? (r(), n("div", re, [
-              (r(!0), n(f, null, g(i.value.right, (t, e, m, a) => {
-                const v = [t, S(I)(t.key, o.data), s.variant, s.showColon];
-                if (a && a.key === t.key + e && B(a, v)) return a;
-                const c = (r(), x(F, {
+                return c.memo = m, c;
+              }, n, 4), 128))
+            ], 2)) : h("", !0),
+            k.value !== 1 && i.value.right.length > 0 ? (r(), o("div", ie, [
+              (r(!0), o(f, null, g(i.value.right, (t, e, v, s) => {
+                const m = [t, L($)(t.key, a.data), y.value, p.value];
+                if (s && s.key === t.key + e && M(s, m)) return s;
+                const c = (r(), S(D, {
                   key: t.key + e,
                   field: t,
-                  data: o.data,
+                  data: a.data,
                   index: e,
-                  variant: s.variant,
-                  "show-colon": s.showColon,
+                  variant: y.value,
+                  "show-colon": p.value,
                   "is-last": e === i.value.right.length - 1,
-                  "show-border-bottom": e < i.value.right.length - 1 || e === i.value.right.length - 1 && !D.value
-                }, j({ _: 2 }, [
-                  g($.value, (b) => ({
+                  "show-border-bottom": e < i.value.right.length - 1 || e === i.value.right.length - 1 && !O.value
+                }, R({ _: 2 }, [
+                  g(j.value, (b) => ({
                     name: b,
-                    fn: L((w) => [
-                      p(l.$slots, b, M({ ref_for: !0 }, w))
+                    fn: F((_) => [
+                      x(l.$slots, b, V({ ref_for: !0 }, _))
                     ])
                   }))
                 ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]));
-                return c.memo = v, c;
-              }, u, 6), 128))
-            ])) : k("", !0),
-            s.columns === 3 ? (r(), n("div", oe)) : k("", !0)
+                return c.memo = m, c;
+              }, n, 6), 128))
+            ])) : h("", !0),
+            k.value === 3 ? (r(), o("div", ve)) : h("", !0)
           ], 2),
-          D.value ? (r(), n("div", {
+          O.value ? (r(), o("div", {
             key: 0,
-            class: C(P.value ? "border-t border-border" : "")
+            class: C(Q.value ? "border-t border-border" : "")
           }, [
-            (r(!0), n(f, null, g(i.value.full, (t, e, m, a) => {
-              const v = [t, S(I)(t.key, o.data), s.variant, s.showColon];
-              if (a && a.key === t.key + e && B(a, v)) return a;
-              const c = (r(), x(F, {
+            (r(!0), o(f, null, g(i.value.full, (t, e, v, s) => {
+              const m = [t, L($)(t.key, a.data), y.value, p.value];
+              if (s && s.key === t.key + e && M(s, m)) return s;
+              const c = (r(), S(D, {
                 key: t.key + e,
                 field: t,
-                data: o.data,
+                data: a.data,
                 index: e,
-                variant: s.variant,
-                "show-colon": s.showColon,
+                variant: y.value,
+                "show-colon": p.value,
                 "is-last": e === i.value.full.length - 1,
                 "show-border-bottom": e < i.value.full.length - 1
-              }, j({ _: 2 }, [
-                g($.value, (b) => ({
+              }, R({ _: 2 }, [
+                g(j.value, (b) => ({
                   name: b,
-                  fn: L((w) => [
-                    p(l.$slots, b, M({ ref_for: !0 }, w))
+                  fn: F((_) => [
+                    x(l.$slots, b, V({ ref_for: !0 }, _))
                   ])
                 }))
               ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]));
-              return c.memo = v, c;
-            }, u, 8), 128))
-          ], 2)) : k("", !0),
-          y.value.length === 0 ? (r(), n("div", le, " No information to display. ")) : k("", !0)
+              return c.memo = m, c;
+            }, n, 8), 128))
+          ], 2)) : h("", !0),
+          w.value.length === 0 ? (r(), o("div", me, " No information to display. ")) : h("", !0)
         ], 64))
       ], 64)),
-      l.$slots.footer ? (r(), n("div", ne, [
-        p(l.$slots, "footer")
-      ])) : k("", !0)
+      l.$slots.footer ? (r(), o("div", ce, [
+        x(l.$slots, "footer")
+      ])) : h("", !0)
     ], 2));
   }
 });
 export {
-  me as default
+  pe as default
 };

package/components/List/ListFieldRow.vue.d.ts

@@ -20,6 +20,13 @@ interface Props {
      * - `'divider'` — Left border on non-first cells per row + extra left padding.
      */
     stackedBorderStyle?: StackedBorderStyle;
+    /**
+     * Character length threshold beyond which the standard horizontal row
+     * automatically switches to the lineByLine (block) layout.
+     * Applies to the standard row only (not stacked/lineByLine-forced rows).
+     * Default: 60. Set to 0 to disable auto-switching.
+     */
+    autoLineByLineThreshold?: number;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -42,12 +49,13 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: string;
+    showColon: boolean;
+    stackedBorderStyle: StackedBorderStyle;
     index: number;
     isLast: boolean;
     showBorderBottom: boolean;
-    showColon: boolean;
     stackedColIndex: number;
-    stackedBorderStyle: StackedBorderStyle;
+    autoLineByLineThreshold: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;