vlite3 0.4.8 → 0.5.2

package/components/Input.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as O, computed as d, useSlots as Q, ref as g, onMounted as X, nextTick as F, openBlock as r, createElementBlock as u, normalizeClass as a, createBlock as k, withCtx as Y, createTextVNode as V, toDisplayString as B, createCommentVNode as c, createElementVNode as j, renderSlot as M, createVNode as p } from "vue";
-import f from "./Icon.vue.js";
-import Z from "./Label.vue.js";
-import _ from "./Textarea.vue.js";
-import { $t as N } from "../utils/i18n.js";
-const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, ue = /* @__PURE__ */ O({
+import { defineComponent as Q, computed as r, useSlots as X, ref as p, onMounted as Y, nextTick as M, openBlock as d, createElementBlock as u, normalizeClass as a, createBlock as B, withCtx as Z, createTextVNode as j, toDisplayString as y, createCommentVNode as s, createElementVNode as z, renderSlot as N, createVNode as h } from "vue";
+import m from "./Icon.vue.js";
+import _ from "./Label.vue.js";
+import ee from "./Textarea.vue.js";
+import { $t as T } from "../utils/i18n.js";
+const te = ["for"], ne = ["type", "value", "placeholder", "disabled", "min", "max"], oe = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, ie = /* @__PURE__ */ Q({
   __name: "Input",
   props: {
     modelValue: { default: "" },
@@ -16,7 +16,9 @@ const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { cl
     loading: { type: Boolean, default: !1 },
     error: {},
     icon: {},
+    iconClass: {},
     iconRight: {},
+    iconRightClass: {},
     showClearButton: { type: Boolean, default: !0 },
     autofocus: { type: Boolean, default: !1 },
     class: { default: "" },
@@ -35,26 +37,29 @@ const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { cl
     max: {}
   },
   emits: ["update:modelValue", "focus", "blur", "change", "click:icon", "click:icon-right"],
-  setup(n, { emit: T }) {
-    const e = n, s = T, x = d(() => e.labelI18n ? N(e.labelI18n) : e.label), z = d(() => e.placeholderI18n ? N(e.placeholderI18n) : e.placeholder), m = Q(), y = g(null), b = g(!1), E = d(() => e.type === "password" && b.value ? "text" : e.type), R = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), v = d(() => !!e.addonLeft || !!m["addon-left"]), h = d(() => !!e.addonRight || !!m["addon-right"]), D = d(() => [
+  setup(t, { emit: E }) {
+    const e = t, i = E, f = r(() => e.labelI18n ? T(e.labelI18n) : e.label), R = r(
+      () => e.placeholderI18n ? T(e.placeholderI18n) : e.placeholder
+    ), b = X(), w = p(null), v = p(!1), D = r(() => e.type === "password" && v.value ? "text" : e.type), C = r(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), g = r(() => !!e.addonLeft || !!b["addon-left"]), k = r(() => !!e.addonRight || !!b["addon-right"]), H = r(() => [
       "relative w-full",
       e.class,
       e.labelPosition === "left" ? "flex items-center gap-4" : "",
       e.labelPosition === "right" ? "flex flex-row-reverse items-center gap-4" : "space-y-2"
-    ].join(" ")), H = d(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
+    ].join(" ")), U = r(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
       " "
-    )), $ = d(() => {
-      const o = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", l = {
+    )), $ = r(() => {
+      const n = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", o = {
         solid: "bg-muted border-transparent focus-visible:border-primary",
         outline: "border border-input focus-visible:border-primary",
         "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-primary",
-        transparent: "border-none bg-transparent shadow-none"
-      }, i = {
+        transparent: "border-none bg-transparent shadow-none",
+        floating: "border border-input focus-visible:border-primary"
+      }, c = {
         sm: "h-7.5 text-xs",
         md: "h-9 text-sm",
         lg: "h-10 text-base"
       };
-      let t = {
+      let l = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded-md",
@@ -63,36 +68,40 @@ const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { cl
         "2xl": "rounded-2xl",
         full: "rounded-full"
       }[e.rounded];
-      v.value && (e.rounded === "md" ? t = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? t = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? t = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? t = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (t = t.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), h.value && (v.value ? t = "rounded-none" : e.rounded === "md" ? t = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? t = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? t = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? t = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (t = t.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (t = "rounded-none");
-      const A = e.variant === "outline-b" || e.variant === "transparent";
+      g.value && (e.rounded === "md" ? l = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? l = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? l = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? l = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (l = l.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), k.value && (g.value ? l = "rounded-none" : e.rounded === "md" ? l = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? l = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? l = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? l = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (l = l.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (l = "rounded-none");
+      const A = e.variant === "outline-b" || e.variant === "transparent", F = e.variant === "floating";
       return [
-        o,
-        l[e.variant],
-        i[e.size],
-        t,
+        n,
+        o[e.variant],
+        e.type === "textarea" ? "" : c[e.size],
+        l,
         e.error ? "border-destructive focus-visible:ring-destructive" : "",
-        e.icon ? "pl-9" : A && !v.value ? "pl-0" : "",
-        e.showClearButton && R.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : A && !h.value ? "pr-0" : "",
+        e.icon ? "pl-9" : A && !g.value ? "pl-0" : "",
+        F && e.type !== "textarea" ? "pt-3 pb-3" : "",
+        // Add padding for floating label but ignore for textarea
+        F && e.type === "textarea" ? "pt-3.5" : "",
+        // Textareas need top padding but normal bottom
+        e.showClearButton && C.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : A && !k.value ? "pr-0" : "",
         e.inputClass
       ].join(" ");
     }), I = {
       sm: "text-xs",
       md: "text-sm",
       lg: "text-base"
-    }, L = (o) => {
-      const l = o === "left";
+    }, L = (n) => {
+      const o = n === "left";
       return [
         "[&_button]:w-full [&_a]:w-full! [&_.v-btn]:w-full! [&_.tooltip-trigger]:w-full",
-        l ? "[&_button]:rounded-r-none [&_a]:rounded-r-none [&_.v-btn]:rounded-r-none" : "[&_button]:rounded-l-none [&_a]:rounded-l-none [&_.v-btn]:rounded-l-none",
+        o ? "[&_button]:rounded-r-none [&_a]:rounded-r-none [&_.v-btn]:rounded-r-none" : "[&_button]:rounded-l-none [&_a]:rounded-l-none [&_.v-btn]:rounded-l-none",
         "[&_button]:relative [&_button]:focus:z-20",
-        l ? "-mr-px" : "-ml-px",
+        o ? "-mr-px" : "-ml-px",
         "z-10"
       ].join(" ");
-    }, U = d(() => {
-      const o = !!m["addon-left"];
+    }, W = r(() => {
+      const n = !!b["addon-left"];
       return [
         "flex items-center justify-center whitespace-nowrap",
-        o ? `border-none ${L("left")}` : `bg-muted border border-input border-r-0! px-3 text-muted-foreground ${{
+        n ? `border-none ${L("left")}` : `bg-muted border border-input border-r-0! px-3 text-muted-foreground ${{
           sm: "rounded-l-sm",
           md: "rounded-l-md",
           lg: "rounded-l-lg",
@@ -101,15 +110,15 @@ const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { cl
           xl: "rounded-l-xl",
           "2xl": "rounded-l-2xl"
         }[e.rounded] || "rounded-l-md"}`,
-        o ? "" : I[e.size],
+        n ? "" : I[e.size],
         e.addonLeftClass,
         e.disabled ? "opacity-50 cursor-not-allowed" : ""
       ].join(" ");
-    }), W = d(() => {
-      const o = !!m["addon-right"];
+    }), q = r(() => {
+      const n = !!b["addon-right"];
       return [
         "flex items-center justify-center whitespace-nowrap",
-        o ? `border-none ${L("right")}` : `bg-muted border border-input border-l-0! px-3 text-muted-foreground ${{
+        n ? `border-none ${L("right")}` : `bg-muted border border-input border-l-0! px-3 text-muted-foreground ${{
           sm: "rounded-r-sm",
           md: "rounded-r-md",
           lg: "rounded-r-lg",
@@ -118,156 +127,164 @@ const ee = ["type", "value", "placeholder", "disabled", "min", "max"], ne = { cl
           xl: "rounded-r-xl",
           "2xl": "rounded-r-2xl"
         }[e.rounded] || "rounded-r-md"}`,
-        o ? "" : I[e.size],
+        n ? "" : I[e.size],
         e.addonRightClass,
         e.disabled ? "opacity-50 cursor-not-allowed" : ""
       ].join(" ");
-    }), q = (o) => {
-      const l = o.target;
-      s("update:modelValue", l.value);
-    }, G = (o) => {
-      const l = o.target;
-      s("change", l.value);
-    }, J = () => {
-      b.value = !b.value;
+    }), G = (n) => {
+      const o = n.target;
+      i("update:modelValue", o.value);
+    }, J = (n) => {
+      const o = n.target;
+      i("change", o.value);
     }, K = () => {
-      s("update:modelValue", ""), F(() => {
-        y.value?.focus();
+      v.value = !v.value;
+    }, O = () => {
+      i("update:modelValue", ""), M(() => {
+        w.value?.focus();
       });
-    }, w = g(!1), C = g(!1), P = (o) => {
-      w.value = !0, s("focus", o);
-    }, S = (o) => {
-      w.value = !1, s("blur", o);
+    }, x = p(!1), V = p(!1), P = (n) => {
+      x.value = !0, i("focus", n);
+    }, S = (n) => {
+      x.value = !1, i("blur", n);
     };
-    return X(() => {
-      e.autofocus && F(() => {
-        y.value?.focus();
+    return Y(() => {
+      e.autofocus && M(() => {
+        w.value?.focus();
       });
-    }), (o, l) => (r(), u("div", {
-      class: a(D.value)
+    }), (n, o) => (d(), u("div", {
+      class: a(H.value)
     }, [
-      x.value ? (r(), k(Z, {
+      f.value && t.variant !== "floating" ? (d(), B(_, {
         key: 0,
-        for: x.value,
-        class: a(["mb-1.5", n.labelPosition !== "top" ? "mb-0" : ""].join(" "))
+        for: f.value,
+        class: a(["mb-1.5", t.labelPosition !== "top" ? "mb-0" : ""].join(" "))
       }, {
-        default: Y(() => [
-          V(B(x.value), 1)
+        default: Z(() => [
+          j(y(f.value), 1)
         ]),
         _: 1
-      }, 8, ["for", "class"])) : c("", !0),
-      j("div", {
-        class: a(H.value)
+      }, 8, ["for", "class"])) : s("", !0),
+      z("div", {
+        class: a(U.value)
       }, [
-        v.value ? (r(), u("div", {
+        g.value ? (d(), u("div", {
           key: 0,
-          class: a(U.value)
+          class: a(W.value)
         }, [
-          M(o.$slots, "addon-left", {}, () => [
-            V(B(n.addonLeft), 1)
+          N(n.$slots, "addon-left", {}, () => [
+            j(y(t.addonLeft), 1)
           ])
-        ], 2)) : c("", !0),
-        j("div", {
+        ], 2)) : s("", !0),
+        z("div", {
           class: "relative w-full",
-          onMouseenter: l[2] || (l[2] = (i) => C.value = !0),
-          onMouseleave: l[3] || (l[3] = (i) => C.value = !1)
+          onMouseenter: o[2] || (o[2] = (c) => V.value = !0),
+          onMouseleave: o[3] || (o[3] = (c) => V.value = !1)
         }, [
-          n.type === "textarea" ? (r(), k(_, {
+          f.value && t.variant === "floating" ? (d(), u("label", {
             key: 0,
-            "model-value": String(n.modelValue),
-            placeholder: z.value,
-            disabled: n.disabled,
-            rows: n.rows,
+            for: f.value,
+            class: a([
+              "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
+              x.value || C.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-primary shadow-[0_4px_4px_-4px_bg-background]" : `top-2.5 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
+            ])
+          }, y(f.value), 11, te)) : s("", !0),
+          t.type === "textarea" ? (d(), B(ee, {
+            key: 1,
+            "model-value": String(t.modelValue),
+            placeholder: R.value,
+            disabled: t.disabled,
+            rows: t.rows,
             class: a($.value),
-            "onUpdate:modelValue": l[0] || (l[0] = (i) => s("update:modelValue", i)),
+            "onUpdate:modelValue": o[0] || (o[0] = (c) => i("update:modelValue", c)),
             onBlur: S,
             onFocus: P
-          }, null, 8, ["model-value", "placeholder", "disabled", "rows", "class"])) : (r(), u("input", {
-            key: 1,
+          }, null, 8, ["model-value", "placeholder", "disabled", "rows", "class"])) : (d(), u("input", {
+            key: 2,
             ref_key: "inputRef",
-            ref: y,
-            type: E.value,
-            value: n.modelValue,
-            placeholder: z.value,
-            disabled: n.disabled,
-            min: n.min,
-            max: n.max,
+            ref: w,
+            type: D.value,
+            value: t.modelValue,
+            placeholder: R.value,
+            disabled: t.disabled,
+            min: t.min,
+            max: t.max,
             class: a($.value),
-            onInput: q,
-            onChange: G,
+            onInput: G,
+            onChange: J,
             onBlur: S,
             onFocus: P
-          }, null, 42, ee)),
-          n.icon ? (r(), u("div", {
-            key: 2,
+          }, null, 42, ne)),
+          t.icon ? (d(), u("div", {
+            key: 3,
             tabindex: "-1",
             class: a([
               "absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center text-muted-foreground z-20 pointer-events-none",
-              n.disabled ? "opacity-50" : ""
+              t.disabled ? "opacity-50" : ""
             ])
           }, [
-            p(f, {
-              icon: n.icon,
-              class: "h-4 w-4"
-            }, null, 8, ["icon"])
-          ], 2)) : c("", !0),
-          j("div", ne, [
-            n.loading ? (r(), k(f, {
+            h(m, {
+              icon: t.icon,
+              class: a(["h-4 w-4", t.iconClass])
+            }, null, 8, ["icon", "class"])
+          ], 2)) : s("", !0),
+          z("div", oe, [
+            t.loading ? (d(), B(m, {
               key: 0,
               icon: "lucide:loader-2",
               class: "h-4 w-4 animate-spin text-muted-foreground"
-            })) : n.iconRight ? (r(), u("div", {
+            })) : t.iconRight ? (d(), u("div", {
               key: 1,
               tabindex: "-1",
               class: a([
                 "flex items-center justify-center text-muted-foreground",
-                n.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-foreground"
+                t.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-foreground"
               ]),
-              onClick: l[1] || (l[1] = (i) => !n.disabled && s("click:icon-right", i))
+              onClick: o[1] || (o[1] = (c) => !t.disabled && i("click:icon-right", c))
             }, [
-              p(f, {
-                icon: n.iconRight,
-                class: "h-4 w-4"
-              }, null, 8, ["icon"])
-            ], 2)) : c("", !0),
-            n.type === "password" && !n.disabled ? (r(), u("button", {
+              h(m, {
+                icon: t.iconRight,
+                class: a(["h-4 w-4", t.iconRightClass])
+              }, null, 8, ["icon", "class"])
+            ], 2)) : s("", !0),
+            t.type === "password" && !t.disabled ? (d(), u("button", {
               key: 2,
               type: "button",
               tabindex: "-1",
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none",
-              onClick: J
+              onClick: K
             }, [
-              p(f, {
-                icon: b.value ? "lucide:eye-off" : "lucide:eye",
+              h(m, {
+                icon: v.value ? "lucide:eye-off" : "lucide:eye",
                 class: "h-4 w-4"
               }, null, 8, ["icon"])
-            ])) : c("", !0),
-            n.showClearButton && R.value && !n.disabled && !n.loading && n.type !== "textarea" && n.type !== "password" && (w.value || C.value) ? (r(), u("button", {
+            ])) : s("", !0),
+            t.showClearButton && C.value && !t.disabled && !t.loading && t.type !== "textarea" && t.type !== "password" && (x.value || V.value) ? (d(), u("button", {
               key: 3,
               type: "button",
               tabindex: "-1",
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none transition-opacity duration-200",
-              onClick: K
+              onClick: O
             }, [
-              p(f, {
+              h(m, {
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })
-            ])) : c("", !0)
+            ])) : s("", !0)
           ])
         ], 32),
-        h.value ? (r(), u("div", {
+        k.value ? (d(), u("div", {
           key: 1,
-          class: a(W.value)
+          class: a(q.value)
         }, [
-          M(o.$slots, "addon-right", {}, () => [
-            V(B(n.addonRight), 1)
+          N(n.$slots, "addon-right", {}, () => [
+            j(y(t.addonRight), 1)
           ])
-        ], 2)) : c("", !0)
+        ], 2)) : s("", !0)
       ], 2)
     ], 2));
   }
 });
 export {
-  ue as default
+  ie as default
 };

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

@@ -0,0 +1,18 @@
+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<{}>, {
+    variant: import('./types').ListVariant;
+    class: string;
+    loading: boolean;
+    columns: import('./types').ListColumns;
+    showColon: boolean;
+    skeletonRows: number;
+}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/List/List.vue.js

@@ -0,0 +1,189 @@
+import { defineComponent as D, useSlots as E, computed as i, openBlock as r, createElementBlock as l, normalizeClass as v, renderSlot as g, createBlock as y, createCommentVNode as c, createElementVNode as b, toDisplayString as O, Fragment as m, renderList as f, createSlots as C, withCtx as I, mergeProps as $ } from "vue";
+import R from "../Icon.vue.js";
+import x from "./ListFieldRow.vue.js";
+import { $t as T } from "../../utils/i18n.js";
+import { getObjectValue as z } from "./utils.js";
+const A = {
+  key: 0,
+  class: "px-3 py-2.5 border-b border-border/70 flex items-center gap-2 bg-gray-50"
+}, N = { class: "text-sm font-semibold text-gray-900 tracking-tight" }, P = { key: 1 }, q = { key: 2 }, G = {
+  key: 1,
+  class: "px-3 py-8 text-center text-sm text-muted-foreground"
+}, H = {
+  key: 3,
+  class: "border-t border-border/70 px-3 py-2.5"
+}, X = /* @__PURE__ */ D({
+  __name: "List",
+  props: {
+    fields: {},
+    data: {},
+    title: {},
+    titleI18n: {},
+    titleIcon: {},
+    columns: { default: 2 },
+    variant: { default: "default" },
+    class: { default: "" },
+    showColon: { type: Boolean, default: !0 },
+    loading: { type: Boolean, default: !1 },
+    skeletonRows: { default: 6 }
+  },
+  setup(a) {
+    const o = a, F = E(), w = i(() => o.fields.filter((e) => {
+      const u = z(e.key, o.data);
+      return e.whenTrue && !u ? !1 : e.when ? e.when(u, o.data) : !0;
+    })), n = i(() => {
+      if (o.columns === 1)
+        return { left: [], right: [], full: w.value };
+      const e = [], u = [], d = [];
+      for (const s of w.value) {
+        if (s.lineByLine) {
+          d.push(s);
+          continue;
+        }
+        e.length <= u.length ? e.push(s) : u.push(s);
+      }
+      const t = Math.abs(e.length - u.length);
+      if (t >= 2) {
+        const s = e.length > u.length ? e : u, h = s.splice(s.length - Math.floor(t / 2));
+        d.unshift(...h);
+      }
+      return { left: e, right: u, full: d };
+    }), k = i(() => n.value.full.length > 0), M = i(
+      () => n.value.left.length > 0 || n.value.right.length > 0
+    ), B = i(() => o.titleI18n ? T(o.titleI18n) : o.title ?? ""), V = i(() => {
+      const e = {
+        default: "border border-border rounded",
+        card: "border border-border rounded-xl bg-card shadow-sm",
+        minimal: "rounded",
+        striped: "border border-border rounded",
+        compact: "border border-border rounded",
+        "bordered-rows": "rounded border border-border"
+      };
+      return [
+        "list-component w-full overflow-hidden",
+        e[o.variant] ?? e.default,
+        o.class
+      ].join(" ");
+    }), j = i(() => 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"), S = i(() => o.columns === 1 ? "" : (o.columns === 3, "border-r border-border/70")), p = i(
+      () => Object.keys(F).filter((e) => !["title", "header", "footer"].includes(e))
+    ), L = i(() => Array.from({ length: o.skeletonRows }));
+    return (e, u) => (r(), l("div", {
+      class: v(V.value),
+      role: "table",
+      "aria-label": "Information list"
+    }, [
+      B.value || a.titleIcon || e.$slots.title ? (r(), l("div", A, [
+        g(e.$slots, "title", {}, () => [
+          a.titleIcon ? (r(), y(R, {
+            key: 0,
+            icon: a.titleIcon,
+            class: "w-4 h-4 text-muted-foreground shrink-0"
+          }, null, 8, ["icon"])) : c("", !0),
+          b("h3", N, O(B.value), 1)
+        ])
+      ])) : c("", !0),
+      a.loading ? (r(), l("div", {
+        key: 1,
+        class: v(j.value)
+      }, [
+        b("div", null, [
+          (r(!0), l(m, null, f(L.value, (d, t) => (r(), l("div", {
+            key: "sk-l-" + t,
+            class: "flex justify-between gap-3 px-3 py-2.5 border-b border-border/70 last:border-b-0"
+          }, [...u[0] || (u[0] = [
+            b("div", { class: "h-4 w-1/3 rounded bg-muted animate-pulse" }, null, -1),
+            b("div", { class: "h-4 w-2/5 rounded bg-muted/60 animate-pulse" }, null, -1)
+          ])]))), 128))
+        ]),
+        a.columns !== 1 ? (r(), l("div", {
+          key: 0,
+          class: v(S.value)
+        }, [
+          (r(!0), l(m, null, f(L.value, (d, t) => (r(), l("div", {
+            key: "sk-r-" + t,
+            class: "flex justify-between gap-3 px-3 py-2.5 border-b border-border/70 last:border-b-0"
+          }, [...u[1] || (u[1] = [
+            b("div", { class: "h-4 w-1/3 rounded bg-muted animate-pulse" }, null, -1),
+            b("div", { class: "h-4 w-2/5 rounded bg-muted/60 animate-pulse" }, null, -1)
+          ])]))), 128))
+        ], 2)) : c("", !0)
+      ], 2)) : (r(), l(m, { key: 2 }, [
+        b("div", {
+          class: v(j.value)
+        }, [
+          n.value.left.length > 0 ? (r(), l("div", {
+            key: 0,
+            class: v(S.value)
+          }, [
+            (r(!0), l(m, null, f(n.value.left, (d, t) => (r(), y(x, {
+              key: d.key + t,
+              field: d,
+              data: o.data,
+              index: t,
+              variant: a.variant,
+              "show-colon": a.showColon,
+              "is-last": t === n.value.left.length - 1,
+              "show-border-bottom": t < n.value.left.length - 1 || t === n.value.left.length - 1 && !k.value
+            }, C({ _: 2 }, [
+              f(p.value, (s) => ({
+                name: s,
+                fn: I((h) => [
+                  g(e.$slots, s, $({ ref_for: !0 }, h))
+                ])
+              }))
+            ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]))), 128))
+          ], 2)) : c("", !0),
+          a.columns !== 1 && n.value.right.length > 0 ? (r(), l("div", P, [
+            (r(!0), l(m, null, f(n.value.right, (d, t) => (r(), y(x, {
+              key: d.key + t,
+              field: d,
+              data: o.data,
+              index: t,
+              variant: a.variant,
+              "show-colon": a.showColon,
+              "is-last": t === n.value.right.length - 1,
+              "show-border-bottom": t < n.value.right.length - 1 || t === n.value.right.length - 1 && !k.value
+            }, C({ _: 2 }, [
+              f(p.value, (s) => ({
+                name: s,
+                fn: I((h) => [
+                  g(e.$slots, s, $({ ref_for: !0 }, h))
+                ])
+              }))
+            ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]))), 128))
+          ])) : c("", !0),
+          a.columns === 3 ? (r(), l("div", q)) : c("", !0)
+        ], 2),
+        k.value ? (r(), l("div", {
+          key: 0,
+          class: v(M.value ? "border-t border-border" : "")
+        }, [
+          (r(!0), l(m, null, f(n.value.full, (d, t) => (r(), y(x, {
+            key: d.key + t,
+            field: d,
+            data: o.data,
+            index: t,
+            variant: a.variant,
+            "show-colon": a.showColon,
+            "is-last": t === n.value.full.length - 1,
+            "show-border-bottom": t < n.value.full.length - 1
+          }, C({ _: 2 }, [
+            f(p.value, (s) => ({
+              name: s,
+              fn: I((h) => [
+                g(e.$slots, s, $({ ref_for: !0 }, h))
+              ])
+            }))
+          ]), 1032, ["field", "data", "index", "variant", "show-colon", "is-last", "show-border-bottom"]))), 128))
+        ], 2)) : c("", !0),
+        w.value.length === 0 ? (r(), l("div", G, " No information to display. ")) : c("", !0)
+      ], 64)),
+      e.$slots.footer ? (r(), l("div", H, [
+        g(e.$slots, "footer")
+      ])) : c("", !0)
+    ], 2));
+  }
+});
+export {
+  X as default
+};

package/components/List/List.vue2.js

@@ -0,0 +1,4 @@
+import f from "./List.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,35 @@
+import { ListField } from './types';
+interface Props {
+    field: ListField;
+    data: Record<string, any>;
+    isLast?: boolean;
+    showBorderBottom?: boolean;
+    variant?: string;
+    showColon?: boolean;
+    index?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<string, (_: {
+        value: any;
+        resolved: string;
+        data: Record<string, any>;
+    }) => any>>;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+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;
+    index: number;
+    isLast: boolean;
+    showBorderBottom: boolean;
+    showColon: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};