vlite3 0.9.2 → 0.9.3

package/components/Alert.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as V, ref as B, computed as t, useSlots as N, openBlock as a, createElementBlock as i, normalizeClass as r, renderSlot as p, createBlock as S, createCommentVNode as o, createElementVNode as v, toDisplayString as m, createTextVNode as T, createVNode as j } from "vue";
-import f from "./Icon.vue.js";
-import { $t as y } from "../utils/i18n.js";
+import { defineComponent as V, ref as B, computed as t, useSlots as N, openBlock as r, createElementBlock as i, normalizeClass as l, renderSlot as p, createBlock as S, createCommentVNode as a, createElementVNode as v, toDisplayString as f, createTextVNode as T, createVNode as j } from "vue";
+import b from "./Icon.vue.js";
+import { $t as m } from "../utils/i18n.js";
 const D = ["role"], E = {
   key: 1,
   class: "text-sm opacity-90 [&_p]:leading-relaxed"
@@ -18,67 +18,69 @@ const D = ["role"], E = {
     class: { default: "" }
   },
   emits: ["close"],
-  setup(s, { emit: b }) {
-    const e = s, k = b, u = B(!0), x = () => {
-      u.value = !1, k("close");
-    }, d = t(() => e.titleI18n ? y(e.titleI18n) : e.title), c = t(() => e.descriptionI18n ? y(e.descriptionI18n) : e.description), h = t(() => ({
-      primary: "bg-primary-light text-primary border-primary/15",
-      success: "bg-success-light text-success-dark border-success/25",
-      warning: "bg-warning-light text-warning-dark border-warning/20",
-      danger: "bg-danger-light text-danger-dark border-danger/15"
+  setup(s, { emit: y }) {
+    const e = s, x = y, u = B(!0), h = () => {
+      u.value = !1, x("close");
+    }, d = t(() => e.titleI18n ? m(e.titleI18n) : e.title), c = t(
+      () => e.descriptionI18n ? m(e.descriptionI18n) : e.description
+    ), k = t(() => ({
+      danger: "bg-danger-subtle text-danger-subtle-fg border-danger-subtle-border/20",
+      primary: "bg-primary-light text-primary-light-fg border-primary/10",
+      success: "bg-success-subtle text-success-subtle-fg border-success-subtle-border/20",
+      warning: "bg-warning-subtle text-warning-subtle-fg border-warning-subtle-border/20"
     })[e.variant]), w = t(() => ({
-      primary: "text-primary!",
-      success: "text-success-dark!",
-      warning: "text-warning-dark!",
-      danger: "text-danger-dark!"
-    })[e.variant]), l = t(() => !c.value && !N().default), C = t(() => [
+      primary: "text-primary-light-fg!",
+      success: "text-success-subtle-fg!",
+      warning: "text-warning-subtle-fg!",
+      danger: "text-danger-subtle-fg!"
+    })[e.variant]), o = t(() => !c.value && !N().default), C = t(() => [
       "relative w-full rounded-lg border px-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground",
-      l.value ? "py-3" : "pt-4 pb-2",
-      l.value ? "[&>svg]:top-1/2 [&>svg]:-translate-y-1/2" : "[&>svg]:top-4 top-4 [&>svg+div]:translate-y-[-3px]",
-      h.value,
+      o.value ? "py-3" : "pt-4 pb-2",
+      o.value ? "[&>svg]:top-1/2 [&>svg]:-translate-y-1/2" : "[&>svg]:top-4 top-4 [&>svg+div]:translate-y-[-3px]",
+      k.value,
       e.class
     ].join(" ")), I = t(() => [
       "font-medium leading-none tracking-tight text-inherit!",
-      l.value ? "" : "mb-1"
+      o.value ? "" : "mb-1"
     ].join(" ")), $ = t(() => e.role ? e.role : ["danger", "warning"].includes(e.variant) ? "alert" : "status");
-    return (n, g) => u.value ? (a(), i("div", {
+    return (n, g) => u.value ? (r(), i("div", {
       key: 0,
-      class: r(C.value),
+      class: l(C.value),
       role: $.value
     }, [
       p(n.$slots, "icon", {}, () => [
-        s.icon ? (a(), S(f, {
+        s.icon ? (r(), S(b, {
           key: 0,
           icon: s.icon,
-          class: r(["h-4 w-4", w.value])
-        }, null, 8, ["icon", "class"])) : o("", !0)
+          class: l(["h-4 w-4", w.value])
+        }, null, 8, ["icon", "class"])) : a("", !0)
       ]),
       v("div", {
-        class: r({ "pl-7": s.icon || n.$slots.icon, "pr-6": s.closable })
+        class: l({ "pl-7": s.icon || n.$slots.icon, "pr-6": s.closable })
       }, [
-        d.value ? (a(), i("h5", {
+        d.value ? (r(), i("h5", {
           key: 0,
-          class: r(I.value)
-        }, m(d.value), 3)) : o("", !0),
-        c.value || n.$slots.default ? (a(), i("div", E, [
+          class: l(I.value)
+        }, f(d.value), 3)) : a("", !0),
+        c.value || n.$slots.default ? (r(), i("div", E, [
           p(n.$slots, "default", {}, () => [
-            T(m(c.value), 1)
+            T(f(c.value), 1)
           ])
-        ])) : o("", !0)
+        ])) : a("", !0)
       ], 2),
-      s.closable ? (a(), i("button", {
+      s.closable ? (r(), i("button", {
         key: 0,
         type: "button",
-        onClick: x,
-        class: r(["absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", [l.value ? "top-1/2 -translate-y-1/2" : "top-4"]])
+        onClick: h,
+        class: l(["absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", [o.value ? "top-1/2 -translate-y-1/2" : "top-4"]])
       }, [
-        j(f, {
+        j(b, {
           icon: "lucide:x",
           class: "h-4 w-4"
         }),
         g[0] || (g[0] = v("span", { class: "sr-only" }, "Close", -1))
-      ], 2)) : o("", !0)
-    ], 10, D)) : o("", !0);
+      ], 2)) : a("", !0)
+    ], 10, D)) : a("", !0);
   }
 });
 export {

package/components/Carousel/Carousel.vue.d.ts

@@ -352,7 +352,7 @@ declare function __VLS_template(): {
             };
         }>> & Readonly<{
             "onSlide-change"?: ((index: number) => any) | undefined;
-        }>, "focus" | "state" | "direction" | "goNext" | "draggable" | "easing" | "gap" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "autoPlayInterval" | "itemsToShow" | "speed" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goPrev" | "autoFocus" | "wheelOptions" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
+        }>, "focus" | "state" | "direction" | "draggable" | "easing" | "goNext" | "gap" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "autoPlayInterval" | "itemsToShow" | "speed" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goPrev" | "autoFocus" | "wheelOptions" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
             goToSlide: (index: number, smooth?: boolean) => void;
             goNext: (smooth?: boolean) => void;
             goPrev: (smooth?: boolean) => void;
@@ -778,7 +778,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         };
     }>> & Readonly<{
         "onSlide-change"?: ((index: number) => any) | undefined;
-    }>, "focus" | "state" | "direction" | "goNext" | "draggable" | "easing" | "gap" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "autoPlayInterval" | "itemsToShow" | "speed" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goPrev" | "autoFocus" | "wheelOptions" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
+    }>, "focus" | "state" | "direction" | "draggable" | "easing" | "goNext" | "gap" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "autoPlayInterval" | "itemsToShow" | "speed" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goPrev" | "autoFocus" | "wheelOptions" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
         goToSlide: (index: number, smooth?: boolean) => void;
         goNext: (smooth?: boolean) => void;
         goPrev: (smooth?: boolean) => void;

package/components/Carousel/Carousel.vue.js

@@ -1,7 +1,7 @@
 import o from "./Carousel.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-4034dab4"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e8fba320"]]);
 export {
-  p as default
+  f as default
 };

package/components/Carousel/Carousel.vue2.js

@@ -6,7 +6,7 @@ const w = { class: "carousel-wrapper" }, V = /* @__PURE__ */ g({
   props: {
     data: { default: () => [] },
     pagination: { type: [String, Array, Boolean], default: "dots" },
-    paginationSize: { default: "md" },
+    paginationSize: { default: "sm" },
     paginationPosition: { default: "bottom-center" },
     paginationVisibility: {},
     paginationHoverInitialTimeout: {},

package/components/DataTable/DataTableRow.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent as C, computed as S, openBlock as s, createElementBlock as d, normalizeClass as u, withModifiers as B, createElementVNode as M, createVNode as p, createCommentVNode as N, Fragment as V, renderList as z, renderSlot as F, createBlock as m } from "vue";
 import L from "../CheckBox.vue.js";
 import $ from "../Price/Price.vue.js";
-import T from "../Date/Date.vue.js";
+import T from "../DateTime/DateTime.vue.js";
 const E = ["data-state"], H = { class: "flex items-center justify-center" }, I = ["title", "innerHTML"], j = /* @__PURE__ */ C({
   __name: "DataTableRow",
   props: {

package/components/DateTime/DateTime.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as D, computed as n, openBlock as _, createElementBlock as g, toDisplayString as h } from "vue";
+import s from "dayjs";
+import { useVLiteConfig as y } from "../../core/config.js";
+const V = /* @__PURE__ */ D({
+  __name: "DateTime",
+  props: {
+    value: {},
+    format: {}
+  },
+  setup(m) {
+    const t = m, i = y(), c = n(() => t.format || i?.components?.datetime?.format || "MM/DD/YYYY"), f = n(() => {
+      if (!t.value) return "--";
+      if (typeof t.value == "string") {
+        const e = t.value.trim();
+        if (/^([01]?\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/.test(e)) {
+          const r = e.split(":"), u = r[0].padStart(2, "0"), l = r[1], p = r[2] || "00", d = `1970-01-01T${u}:${l}:${p}`, a = s(d);
+          if (a.isValid()) {
+            const v = t.format || "h:mm A";
+            return a.format(v);
+          }
+        }
+      }
+      const o = s(t.value);
+      return o.isValid() ? o.format(c.value) : String(t.value);
+    });
+    return (o, e) => (_(), g("span", null, h(f.value), 1));
+  }
+});
+export {
+  V as default
+};

package/components/DateTime/DateTime.vue2.js

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

package/components/DateTime/index.d.ts

@@ -0,0 +1 @@
+export { default as DateTime } from './DateTime.vue';

package/components/Form/CustomFields.vue.d.ts

@@ -8,6 +8,7 @@ interface Props {
     size?: InputSize;
     rounded?: InputRounded;
     disabled?: boolean;
+    draggable?: boolean;
     minRows?: number;
     maxRows?: number;
     addButtonText?: string;
@@ -33,6 +34,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     isUpdate: boolean;
     modelValue: Record<string, any>[];
     headers: string[];
+    draggable: boolean;
     minRows: number;
     addButtonText: string;
     showRowNumbers: boolean;

package/components/Form/CustomFields.vue.js

@@ -1,7 +1,7 @@
 import o from "./CustomFields.vue2.js";
 /* empty css                  */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0cced8cd"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-877e3c1c"]]);
 export {
-  p as default
+  r as default
 };

package/components/Form/CustomFields.vue2.js

@@ -1,27 +1,32 @@
-import { defineComponent as M, computed as c, shallowRef as G, watch as H, openBlock as o, createElementBlock as n, createElementVNode as b, createBlock as q, withCtx as N, createTextVNode as J, toDisplayString as m, createCommentVNode as u, createVNode as v, Fragment as x, renderList as y, normalizeClass as F, TransitionGroup as K, isMemoSame as O } from "vue";
-import P from "./FormField.vue.js";
-import B from "../Button.vue.js";
-import Q from "../Label.vue.js";
-import { $t as p } from "../../utils/i18n.js";
-const W = { class: "custom-fields-wrapper" }, X = { class: "flex justify-between items-center mb-2" }, Y = { class: "custom-fields-table border border-border rounded overflow-hidden bg-background" }, Z = {
+import { defineComponent as H, computed as c, shallowRef as q, watch as G, openBlock as o, createElementBlock as n, createElementVNode as g, createBlock as J, withCtx as B, createTextVNode as K, toDisplayString as m, createCommentVNode as i, createVNode as b, Fragment as y, renderList as p, normalizeClass as x, unref as O, isMemoSame as P } from "vue";
+import { VueDraggable as Q } from "vue-draggable-plus";
+import W from "./FormField.vue.js";
+import F from "../Button.vue.js";
+import X from "../Label.vue.js";
+import Y from "../Icon.vue.js";
+import { $t as h } from "../../utils/i18n.js";
+const Z = { class: "custom-fields-wrapper" }, ee = { class: "flex justify-between items-center mb-2" }, te = { class: "custom-fields-table border border-border rounded overflow-hidden bg-background" }, ae = {
   key: 0,
   class: "flex border-b border-border bg-muted/50 text-gray-800 text-xs font-semibold uppercase tracking-wider"
-}, ee = {
+}, le = {
   key: 0,
-  class: "w-10 flex-none p-3 text-center border-r border-border"
-}, te = {
+  class: "w-10 flex-none p-3 border-r border-border"
+}, re = {
   key: 1,
-  class: "w-10 flex-none p-3"
+  class: "w-10 flex-none p-3 text-center border-r border-border"
 }, se = {
-  key: 0,
-  class: "w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20"
-}, le = {
+  key: 2,
+  class: "w-10 flex-none p-3"
+}, oe = {
   key: 1,
+  class: "w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20"
+}, ne = {
+  key: 2,
   class: "w-10 flex-none flex items-center justify-center border-l border-border bg-muted/20"
-}, ae = {
+}, de = {
   key: 1,
   class: "flex flex-col items-center justify-center py-6 text-center bg-muted/5"
-}, oe = { class: "text-sm font-medium text-foreground" }, ne = { class: "text-xs text-muted-foreground mt-1" }, fe = /* @__PURE__ */ M({
+}, ie = { class: "text-sm font-medium text-foreground" }, ue = { class: "text-xs text-muted-foreground mt-1" }, ye = /* @__PURE__ */ H({
   __name: "CustomFields",
   props: {
     modelValue: { default: () => [] },
@@ -31,6 +36,7 @@ const W = { class: "custom-fields-wrapper" }, X = { class: "flex justify-between
     size: { default: "md" },
     rounded: { default: "md" },
     disabled: { type: Boolean, default: !1 },
+    draggable: { type: Boolean, default: !1 },
     minRows: { default: 0 },
     maxRows: {},
     addButtonText: { default: "Add Row" },
@@ -42,144 +48,160 @@ const W = { class: "custom-fields-wrapper" }, X = { class: "flex justify-between
     isUpdate: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change"],
-  setup(d, { emit: $ }) {
-    const t = d, g = $, _ = c(() => t.labelI18n ? p(t.labelI18n) : t.label), T = c(() => {
-      const e = p("vlite.customFields.emptyTitle");
+  setup(r, { emit: $ }) {
+    const t = r, R = $, k = c(() => t.labelI18n ? h(t.labelI18n) : t.label), D = c(() => {
+      const e = h("vlite.customFields.emptyTitle");
       return e !== "vlite.customFields.emptyTitle" ? e : "No items added";
-    }), z = c(() => {
-      const e = p("vlite.customFields.emptyDescription");
+    }), U = c(() => {
+      const e = h("vlite.customFields.emptyDescription");
       return e !== "vlite.customFields.emptyDescription" ? e : "Add a new item to get started";
-    }), l = G([]), R = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    H(
+    }), l = q([]), _ = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    G(
       () => t.modelValue,
       (e) => {
-        Array.isArray(e) ? l.value = e.map((s, r) => {
-          const a = l.value[r];
+        Array.isArray(e) ? l.value = e.map((a, d) => {
+          const s = l.value[d];
           return {
-            ...s,
-            _id: a?._id || R()
+            ...a,
+            _id: s?._id || _()
           };
         }) : l.value = [];
       },
       { immediate: !0, deep: !0 }
     );
-    const A = () => {
+    const j = () => {
       const e = {};
-      for (const s of t.schema) {
-        const r = typeof s.value == "function" ? s.value() : s.value;
-        e[s.name] = r ?? null;
+      for (const a of t.schema) {
+        const d = typeof a.value == "function" ? a.value() : a.value;
+        e[a.name] = d ?? null;
       }
-      return { ...e, _id: R() };
-    }, D = () => {
+      return { ...e, _id: _() };
+    }, z = () => {
       if (t.disabled || t.maxRows && l.value.length >= t.maxRows) return;
-      const e = [...l.value, A()];
-      l.value = e, h(e);
-    }, E = (e) => {
+      const e = [...l.value, j()];
+      l.value = e, f(e);
+    }, A = (e) => {
       if (t.disabled || l.value.length <= t.minRows) return;
-      const s = [...l.value];
-      s.splice(e, 1), l.value = s, h(s);
-    }, U = (e, s, r) => {
       const a = [...l.value];
-      a[e] = {
-        ...a[e],
-        [s]: r.value
-      }, l.value = a, h(a);
-    }, h = (e) => {
-      const s = e.map(({ _id: r, ...a }) => a);
-      g("update:modelValue", s), g("change", s);
-    }, j = (e, s) => l.value[e]?.[s], S = c(() => !(t.disabled || t.maxRows && l.value.length >= t.maxRows)), w = c(() => t.disabled ? !1 : l.value.length > t.minRows), k = c(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? p(e.labelI18n) : e.label || e.name));
-    return (e, s) => (o(), n("div", W, [
-      b("div", X, [
-        _.value ? (o(), q(Q, {
+      a.splice(e, 1), l.value = a, f(a);
+    }, E = (e, a, d) => {
+      const s = [...l.value];
+      s[e] = {
+        ...s[e],
+        [a]: d.value
+      }, l.value = s, f(s);
+    }, T = (e) => {
+      l.value = e, f(e);
+    }, f = (e) => {
+      const a = e.map(({ _id: d, ...s }) => s);
+      R("update:modelValue", a), R("change", a);
+    }, S = (e, a) => l.value[e]?.[a], I = c(() => !(t.disabled || t.maxRows && l.value.length >= t.maxRows)), w = c(() => t.disabled ? !1 : l.value.length > t.minRows), C = c(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? h(e.labelI18n) : e.label || e.name));
+    return (e, a) => (o(), n("div", Z, [
+      g("div", ee, [
+        k.value ? (o(), J(X, {
           key: 0,
           class: "text-sm font-medium text-foreground"
         }, {
-          default: N(() => [
-            J(m(_.value), 1)
+          default: B(() => [
+            K(m(k.value), 1)
           ]),
           _: 1
-        })) : u("", !0),
-        v(B, {
+        })) : i("", !0),
+        b(F, {
           type: "button",
           variant: "outline",
           size: "xs",
           rounded: "full",
           icon: "lucide:plus",
-          disabled: !S.value,
-          onClick: D
+          disabled: !I.value,
+          onClick: z
         }, null, 8, ["disabled"])
       ]),
-      b("div", Y, [
-        k.value.length > 0 ? (o(), n("div", Z, [
-          d.showRowNumbers ? (o(), n("div", ee, " # ")) : u("", !0),
-          (o(!0), n(x, null, y(k.value, (r, a) => (o(), n("div", {
-            key: a,
-            class: F(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": a > 0 }])
-          }, m(r), 3))), 128)),
-          w.value ? (o(), n("div", te)) : u("", !0)
-        ])) : u("", !0),
-        v(K, {
-          name: "list",
-          tag: "div",
+      g("div", te, [
+        C.value.length > 0 ? (o(), n("div", ae, [
+          r.draggable ? (o(), n("div", le)) : i("", !0),
+          r.showRowNumbers ? (o(), n("div", re, " # ")) : i("", !0),
+          (o(!0), n(y, null, p(C.value, (d, s) => (o(), n("div", {
+            key: s,
+            class: x(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": s > 0 }])
+          }, m(d), 3))), 128)),
+          w.value ? (o(), n("div", se)) : i("", !0)
+        ])) : i("", !0),
+        b(O(Q), {
+          "model-value": l.value,
+          "onUpdate:modelValue": T,
+          disabled: !r.draggable || r.disabled,
+          animation: 150,
+          handle: ".drag-handle",
+          "ghost-class": "opacity-50",
           class: "divide-y divide-border"
         }, {
-          default: N(() => [
-            (o(!0), n(x, null, y(l.value, (r, a, re, f) => {
-              const C = [r, d.disabled, d.isUpdate, d.showRowNumbers, w.value];
-              if (f && f.key === r._id && O(f, C)) return f;
-              const V = (o(), n("div", {
-                key: r._id,
+          default: B(() => [
+            (o(!0), n(y, null, p(l.value, (d, s, ce, v) => {
+              const V = [d, r.disabled, r.isUpdate, r.showRowNumbers, w.value, r.draggable, s];
+              if (v && v.key === d._id && P(v, V)) return v;
+              const N = (o(), n("div", {
+                key: d._id,
                 class: "flex group bg-white transition-colors"
               }, [
-                d.showRowNumbers ? (o(), n("div", se, m(a + 1), 1)) : u("", !0),
-                (o(!0), n(x, null, y(d.schema, (i, I) => (o(), n("div", {
-                  key: i.name,
-                  class: F(["flex-1 min-w-0 relative", { "border-l border-border": I > 0 }])
+                r.draggable ? (o(), n("div", {
+                  key: 0,
+                  class: x(["w-10 flex-none flex items-center justify-center border-r border-border bg-muted/5 drag-handle transition-colors", r.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"])
+                }, [
+                  b(Y, {
+                    icon: "lucide:grip-vertical",
+                    class: "w-4 h-4"
+                  })
+                ], 2)) : i("", !0),
+                r.showRowNumbers ? (o(), n("div", oe, m(s + 1), 1)) : i("", !0),
+                (o(!0), n(y, null, p(r.schema, (u, L) => (o(), n("div", {
+                  key: u.name,
+                  class: x(["flex-1 min-w-0 relative", { "border-l border-border": L > 0 }])
                 }, [
-                  v(P, {
+                  b(W, {
                     field: {
-                      ...i,
+                      ...u,
                       props: {
-                        ...i.type === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
-                        ...i.props || {}
+                        ...u.type === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
+                        ...u.props || {}
                       },
                       label: void 0
                     },
-                    value: j(a, i.name),
-                    values: d.values || {},
+                    value: S(s, u.name),
+                    values: r.values || {},
                     variant: "transparent",
                     size: "sm",
                     rounded: "none",
-                    disabled: d.disabled,
-                    isUpdate: d.isUpdate,
+                    disabled: r.disabled,
+                    isUpdate: r.isUpdate,
                     class: "w-full h-full min-h-[40px]",
-                    onChange: (L) => U(a, i.name, L)
+                    onChange: (M) => E(s, u.name, M)
                   }, null, 8, ["field", "value", "values", "disabled", "isUpdate", "onChange"])
                 ], 2))), 128)),
-                w.value ? (o(), n("div", le, [
-                  v(B, {
+                w.value ? (o(), n("div", ne, [
+                  b(F, {
                     type: "button",
                     variant: "ghost",
                     size: "xs",
                     icon: "lucide:trash-2",
-                    disabled: d.disabled,
-                    onClick: (i) => E(a)
+                    disabled: r.disabled,
+                    onClick: (u) => A(s)
                   }, null, 8, ["disabled", "onClick"])
-                ])) : u("", !0)
+                ])) : i("", !0)
               ]));
-              return V.memo = C, V;
-            }, s, 0), 128))
+              return N.memo = V, N;
+            }, a, 0), 128))
           ]),
           _: 1
-        }),
-        l.value.length === 0 ? (o(), n("div", ae, [
-          b("p", oe, m(T.value), 1),
-          b("p", ne, m(z.value), 1)
-        ])) : u("", !0)
+        }, 8, ["model-value", "disabled"]),
+        l.value.length === 0 ? (o(), n("div", de, [
+          g("p", ie, m(D.value), 1),
+          g("p", ue, m(U.value), 1)
+        ])) : i("", !0)
       ])
     ]));
   }
 });
 export {
-  fe as default
+  ye as default
 };

package/components/Form/FormField.vue.js

@@ -211,6 +211,7 @@ const pe = /* @__PURE__ */ I({
         modelValue: Array.isArray(e.value) ? e.value : [],
         schema: e.field.props?.schema || [],
         headers: e.field.props?.headers || [],
+        draggable: e.field.props?.draggable || !1,
         values: e.values,
         variant: e.variant,
         size: e.size,

package/components/Form/types.d.ts

@@ -64,6 +64,7 @@ export type IFormWhen = (context: IFormContext) => boolean;
 export interface IFormCustomFieldsProps {
     schema: IForm[];
     headers?: string[];
+    draggable?: boolean;
 }
 /**
  * Main form field interface

package/components/List/ListFieldRow.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent as V, ref as D, computed as f, openBlock as l, createElementBlock as a, normalizeClass as s, createElementVNode as v, createBlock as u, createCommentVNode as T, toDisplayString as w, renderSlot as C, resolveDynamicComponent as B, Fragment as m, createVNode as S } from "vue";
 import x from "../Icon.vue.js";
 import b from "../Price/Price.vue.js";
-import h from "../Date/Date.vue.js";
+import h from "../DateTime/DateTime.vue.js";
 import { $t as I } from "../../utils/i18n.js";
 import { getObjectValue as N, formatNumber as Y, getStatusColorClass as F } from "./utils.js";
 const A = { class: "flex items-center gap-2 min-w-0" }, E = { class: "text-xs font-normal text-muted-foreground leading-snug truncate" }, O = { class: "min-w-0" }, z = {