vlite3 1.2.1 → 1.2.2

package/components/AppShell/AppShellLayoutHeaderShell.vue.js

@@ -1,46 +1,46 @@
-import { defineComponent as _, inject as V, openBlock as a, createElementBlock as o, createVNode as m, Transition as z, withCtx as h, withDirectives as N, createElementVNode as t, normalizeClass as b, unref as e, renderSlot as r, createCommentVNode as i, vShow as R, isRef as g, createTextVNode as B } from "vue";
-import E from "../SidePanel.vue.js";
-import L from "../Navbar/NavbarTabs.vue.js";
+import { defineComponent as V, inject as z, openBlock as a, createElementBlock as o, createVNode as m, Transition as _, withCtx as p, withDirectives as N, createElementVNode as t, normalizeClass as b, unref as e, renderSlot as l, createCommentVNode as i, vShow as R, isRef as g, createSlots as B, createTextVNode as E } from "vue";
+import L from "../SidePanel.vue.js";
+import M from "../Navbar/NavbarTabs.vue.js";
 /* empty css                        */
-import M from "../Breadcrumb/Breadcrumb.vue.js";
+import P from "../Breadcrumb/Breadcrumb.vue.js";
 import "@iconify/vue";
 /* empty css                                */
-import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
-const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background overflow-hidden" }, H = {
+import { APPSHELL_LAYOUT_KEY as A } from "./useAppShell.js";
+const H = { class: "vlite-app-layout flex flex-row w-full h-full bg-background overflow-hidden" }, O = {
   key: 0,
-  class: "flex items-center px-4 py-3"
-}, O = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden gap-2 max-sm:p-0 max-sm:gap-0" }, U = {
+  class: "flex items-center"
+}, U = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden gap-2 max-sm:p-0 max-sm:gap-0" }, D = {
   key: 0,
-  class: "w-full shrink-0 z-20 px-5 pt-2"
-}, D = { class: "w-full shrink-0 z-20 bg-background rounded-xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm" }, I = {
+  class: "w-full shrink-0 z-20 px-5 pt-2 border-hidden"
+}, I = { class: "w-full shrink-0 z-20 bg-background overflow-hidden rounded-xl max-sm:rounded-none border border-border max-sm:border-0" }, Y = {
   key: 0,
   class: "shrink-0 w-full px-6"
-}, Y = { class: "flex flex-col h-full" }, j = {
-  class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable",
+}, j = { class: "flex flex-col h-full" }, K = {
+  class: "flex-1 overflow-y-auto scrollbar-thin scrollbar-stable",
   style: { "will-change": "transform", contain: "layout style" }
-}, K = {
+}, q = {
   key: 0,
-  class: "mt-auto pt-2 border-t border-border px-3 py-2"
-}, se = /* @__PURE__ */ _({
+  class: "mt-auto"
+}, le = /* @__PURE__ */ V({
   __name: "AppShellLayoutHeaderShell",
-  setup(q) {
-    const y = V(P), {
-      props: l,
+  setup(F) {
+    const y = z(A), {
+      props: r,
       sidebarHidden: w,
       isMobileMenuOpen: d,
       isSidebarVisible: k,
-      toggleSidebar: x,
-      pageTitle: $,
-      breadcrumbData: u,
-      breakpointClasses: f,
+      toggleSidebar: $,
+      pageTitle: x,
+      breadcrumbData: f,
+      breakpointClasses: u,
       nestedTabsItems: v,
       activeNestedTab: c,
       handleNestedTabClick: C,
       mainScrollRef: S,
       layoutMainRef: T
     } = y;
-    return (s, n) => (a(), o("div", A, [
-      m(z, {
+    return (s, n) => (a(), o("div", H, [
+      m(_, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
         "enter-from-class": "opacity-0 -translate-x-2",
@@ -48,30 +48,30 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
         "leave-from-class": "opacity-100 translate-x-0",
         "leave-to-class": "opacity-0 -translate-x-2"
       }, {
-        default: h(() => [
+        default: p(() => [
           N(t("nav", {
             class: b([
-              "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
-              e(f).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
-              e(l).class
+              "shrink-0 h-full flex flex-col bg-background border-r border-border  overflow-hidden z-30",
+              e(u).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
+              e(r).class
             ]),
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
-            s.$slots["sidebar-header"] ? (a(), o("div", H, [
-              r(s.$slots, "sidebar-header")
+            s.$slots["sidebar-header"] ? (a(), o("div", O, [
+              l(s.$slots, "sidebar-header")
             ])) : i("", !0),
             t("div", {
-              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(l).contentClass]),
+              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(r).contentClass]),
               style: { "will-change": "transform", contain: "layout style" }
             }, [
-              r(s.$slots, "sidebar")
+              l(s.$slots, "sidebar")
             ], 2),
             s.$slots["sidebar-footer"] ? (a(), o("div", {
               key: 1,
-              class: b(["shrink-0 border-t border-border bg-background", e(l).rightClass])
+              class: b(["shrink-0", e(r).rightClass])
             }, [
-              r(s.$slots, "sidebar-footer")
+              l(s.$slots, "sidebar-footer")
             ], 2)) : i("", !0)
           ], 2), [
             [R, !e(w)]
@@ -79,16 +79,16 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
         ]),
         _: 3
       }),
-      t("div", O, [
-        s.$slots.header ? (a(), o("header", U, [
-          t("div", D, [
-            r(s.$slots, "header", {
+      t("div", U, [
+        s.$slots.header ? (a(), o("header", D, [
+          t("div", I, [
+            l(s.$slots, "header", {
               isOpen: e(d),
               toggle: () => d.value = !e(d),
               sidebarVisible: e(k),
-              toggleSidebar: e(x),
-              breadcrumbItems: e(u).items.value,
-              pageTitle: e($)
+              toggleSidebar: e($),
+              breadcrumbItems: e(f).items.value,
+              pageTitle: e(x)
             })
           ])
         ])) : i("", !0),
@@ -98,23 +98,23 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
           ref: T,
           class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0 bg-background"
         }, [
-          e(l).renderNestedTabs && e(v).length > 0 ? (a(), o("div", I, [
-            m(L, {
+          e(r).renderNestedTabs && e(v).length > 0 ? (a(), o("div", Y, [
+            m(M, {
               modelValue: e(c),
-              "onUpdate:modelValue": n[0] || (n[0] = (p) => g(c) ? c.value = p : null),
+              "onUpdate:modelValue": n[0] || (n[0] = (h) => g(c) ? c.value = h : null),
               onChange: e(C),
               items: e(v)
             }, null, 8, ["modelValue", "onChange", "items"])
           ])) : i("", !0),
-          e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(u).items.value.length > 1 ? (a(), o("div", {
+          e(r).breadcrumb && e(r).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (a(), o("div", {
             key: 1,
-            class: b(["shrink-0 w-full border-b border-border/50 px-6 py-2", e(l).breadcrumbClass])
+            class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(r).breadcrumbClass])
           }, [
-            m(e(M), {
-              items: e(u).items.value,
-              variant: e(l).breadcrumbVariant,
-              separator: e(l).breadcrumbSeparator,
-              size: e(l).breadcrumbSize
+            m(e(P), {
+              items: e(f).items.value,
+              variant: e(r).breadcrumbVariant,
+              separator: e(r).breadcrumbSeparator,
+              size: e(r).breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : i("", !0),
           t("div", {
@@ -123,46 +123,51 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
             style: { "will-change": "transform", contain: "layout style" },
             class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable px-6 pb-4 mt-4"
           }, [
-            r(s.$slots, "main")
+            l(s.$slots, "main")
           ], 512)
         ], 512)) : i("", !0)
       ]),
-      m(E, {
+      m(L, {
         show: e(d),
-        "onUpdate:show": n[1] || (n[1] = (p) => g(d) ? d.value = p : null),
+        "onUpdate:show": n[1] || (n[1] = (h) => g(d) ? d.value = h : null),
         position: "left",
         size: "sm",
-        triggerClass: e(f).mobileTrigger,
-        class: b(["z-60", e(f).mobileTrigger]),
+        triggerClass: e(u).mobileTrigger,
+        class: b(["z-60", e(u).mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
-      }, {
-        header: h(() => [
-          r(s.$slots, "mobile-sidebar-header", {}, () => [
-            r(s.$slots, "sidebar-header", {}, () => [
-              n[2] || (n[2] = B("Brand", -1))
-            ])
-          ])
-        ]),
-        default: h(() => [
-          t("div", Y, [
-            t("div", j, [
-              r(s.$slots, "mobile-sidebar", {}, () => [
-                r(s.$slots, "sidebar")
+      }, B({
+        default: p(() => [
+          t("div", j, [
+            t("div", K, [
+              l(s.$slots, "mobile-sidebar", {}, () => [
+                l(s.$slots, "sidebar")
               ])
             ]),
-            s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (a(), o("div", K, [
-              r(s.$slots, "mobile-sidebar-footer", {}, () => [
-                r(s.$slots, "sidebar-footer")
+            s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (a(), o("div", q, [
+              l(s.$slots, "mobile-sidebar-footer", {}, () => [
+                l(s.$slots, "sidebar-footer")
               ])
             ])) : i("", !0)
           ])
         ]),
-        _: 3
-      }, 8, ["show", "triggerClass", "class"])
+        _: 2
+      }, [
+        s.$slots["mobile-sidebar-header"] || s.$slots["sidebar-header"] ? {
+          name: "header",
+          fn: p(() => [
+            l(s.$slots, "mobile-sidebar-header", {}, () => [
+              l(s.$slots, "sidebar-header", {}, () => [
+                n[2] || (n[2] = E("Brand", -1))
+              ])
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["show", "triggerClass", "class"])
     ]));
   }
 });
 export {
-  se as default
+  le as default
 };

package/components/AppShell/AppShellLayoutSidebarFirst.vue.js

@@ -1,17 +1,14 @@
-import { defineComponent as V, inject as _, openBlock as a, createElementBlock as o, createVNode as f, Transition as z, withCtx as p, withDirectives as N, createElementVNode as d, normalizeClass as b, unref as e, renderSlot as s, createCommentVNode as t, vShow as R, isRef as y, createTextVNode as B } from "vue";
-import E from "../SidePanel.vue.js";
-import L from "../Navbar/NavbarTabs.vue.js";
+import { defineComponent as x, inject as z, openBlock as r, createElementBlock as o, createVNode as m, Transition as N, withCtx as p, withDirectives as R, createElementVNode as d, normalizeClass as b, unref as e, renderSlot as s, createCommentVNode as t, vShow as _, isRef as y, createSlots as B, createTextVNode as E } from "vue";
+import L from "../SidePanel.vue.js";
+import M from "../Navbar/NavbarTabs.vue.js";
 /* empty css                        */
-import M from "../Breadcrumb/Breadcrumb.vue.js";
+import P from "../Breadcrumb/Breadcrumb.vue.js";
 import "@iconify/vue";
 /* empty css                                */
-import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
-const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden" }, O = {
+import { APPSHELL_LAYOUT_KEY as A } from "./useAppShell.js";
+const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden" }, U = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, D = {
   key: 0,
-  class: "flex items-center px-4 py-3"
-}, U = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, D = {
-  key: 0,
-  class: "w-full shrink-0 z-20 bg-background"
+  class: "w-full shrink-0 z-20 border-b bg-background"
 }, H = {
   key: 0,
   class: "shrink-0 w-full"
@@ -20,27 +17,27 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
   style: { "will-change": "transform", contain: "layout style" }
 }, j = {
   key: 0,
-  class: "mt-auto pt-2 border-t border-border px-3 py-2"
-}, ee = /* @__PURE__ */ V({
+  class: "mt-auto"
+}, ee = /* @__PURE__ */ x({
   __name: "AppShellLayoutSidebarFirst",
   setup(F) {
-    const g = _(P), {
-      props: r,
+    const g = z(A), {
+      props: a,
       sidebarHidden: w,
       isMobileMenuOpen: i,
       isSidebarVisible: k,
       toggleSidebar: $,
       pageTitle: C,
-      breadcrumbData: m,
+      breadcrumbData: f,
       breakpointClasses: u,
       nestedTabsItems: v,
       activeNestedTab: c,
-      handleNestedTabClick: x,
-      mainScrollRef: S,
-      layoutMainRef: T
+      handleNestedTabClick: S,
+      mainScrollRef: T,
+      layoutMainRef: V
     } = g;
-    return (l, n) => (a(), o("div", A, [
-      f(z, {
+    return (l, n) => (r(), o("div", O, [
+      m(N, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
         "enter-from-class": "opacity-0 -translate-x-2",
@@ -49,75 +46,73 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
         "leave-to-class": "opacity-0 -translate-x-2"
       }, {
         default: p(() => [
-          N(d("nav", {
+          R(d("nav", {
             class: b([
               "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
               e(u).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
-              e(r).class
+              e(a).class
             ]),
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
-            l.$slots["sidebar-header"] ? (a(), o("div", O, [
-              s(l.$slots, "sidebar-header")
-            ])) : t("", !0),
+            l.$slots["sidebar-header"] ? s(l.$slots, "sidebar-header", { key: 0 }) : t("", !0),
             d("div", {
-              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(r).contentClass]),
+              class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(a).contentClass]),
               style: { "will-change": "transform", contain: "layout style" }
             }, [
               s(l.$slots, "sidebar")
             ], 2),
-            l.$slots["sidebar-footer"] ? (a(), o("div", {
+            l.$slots["sidebar-footer"] ? (r(), o("div", {
               key: 1,
-              class: b(["shrink-0 border-t border-border bg-background", e(r).rightClass])
+              class: b(["shrink-0", e(a).rightClass])
             }, [
               s(l.$slots, "sidebar-footer")
             ], 2)) : t("", !0)
           ], 2), [
-            [R, !e(w)]
+            [_, !e(w)]
           ])
         ]),
         _: 3
       }),
       d("div", U, [
-        l.$slots.header ? (a(), o("header", D, [
+        l.$slots.header ? (r(), o("header", D, [
           s(l.$slots, "header", {
             isOpen: e(i),
             toggle: () => i.value = !e(i),
             sidebarVisible: e(k),
             toggleSidebar: e($),
-            breadcrumbItems: e(m).items.value,
+            breadcrumbItems: e(f).items.value,
             pageTitle: e(C)
           })
         ])) : t("", !0),
-        l.$slots.main ? (a(), o("main", {
+        l.$slots.main ? (r(), o("main", {
           key: 1,
           ref_key: "layoutMainRef",
-          ref: T,
+          ref: V,
           class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
         }, [
-          e(r).renderNestedTabs && e(v).length > 0 ? (a(), o("div", H, [
-            f(L, {
+          e(a).renderNestedTabs && e(v).length > 0 ? (r(), o("div", H, [
+            m(M, {
               modelValue: e(c),
               "onUpdate:modelValue": n[0] || (n[0] = (h) => y(c) ? c.value = h : null),
-              onChange: e(x),
+              onChange: e(S),
               items: e(v)
             }, null, 8, ["modelValue", "onChange", "items"])
           ])) : t("", !0),
-          e(r).breadcrumb && e(r).breadcrumbPosition === "main" && e(m).items.value.length > 1 ? (a(), o("div", {
+          e(a).breadcrumb && e(a).breadcrumbPosition === "main" && e(f).items.value.length > 1 ? (r(), o("div", {
             key: 1,
-            class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(r).breadcrumbClass])
+            class: b(["shrink-0 w-full border-b border-border px-6 py-2", e(a).breadcrumbClass])
           }, [
-            f(e(M), {
-              items: e(m).items.value,
-              variant: e(r).breadcrumbVariant,
-              separator: e(r).breadcrumbSeparator,
-              size: e(r).breadcrumbSize
+            m(e(P), {
+              items: e(f).items.value,
+              variant: e(a).breadcrumbVariant,
+              separator: e(a).breadcrumbSeparator,
+              size: e(a).breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : t("", !0),
           d("div", {
             ref_key: "mainScrollRef",
-            ref: S,
+            ref: T,
             style: { "will-change": "transform", contain: "layout style" },
             class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
@@ -125,7 +120,7 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
           ], 512)
         ], 512)) : t("", !0)
       ]),
-      f(E, {
+      m(L, {
         show: e(i),
         "onUpdate:show": n[1] || (n[1] = (h) => y(i) ? i.value = h : null),
         position: "left",
@@ -134,14 +129,7 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
         class: b(["z-60", e(u).mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
-      }, {
-        header: p(() => [
-          s(l.$slots, "mobile-sidebar-header", {}, () => [
-            s(l.$slots, "sidebar-header", {}, () => [
-              n[2] || (n[2] = B("Brand", -1))
-            ])
-          ])
-        ]),
+      }, B({
         default: p(() => [
           d("div", I, [
             d("div", Y, [
@@ -149,15 +137,27 @@ const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-body overflo
                 s(l.$slots, "sidebar")
               ])
             ]),
-            l.$slots["mobile-sidebar-footer"] || l.$slots["sidebar-footer"] ? (a(), o("div", j, [
+            l.$slots["mobile-sidebar-footer"] || l.$slots["sidebar-footer"] ? (r(), o("div", j, [
               s(l.$slots, "mobile-sidebar-footer", {}, () => [
                 s(l.$slots, "sidebar-footer")
               ])
             ])) : t("", !0)
           ])
         ]),
-        _: 3
-      }, 8, ["show", "triggerClass", "class"])
+        _: 2
+      }, [
+        l.$slots["mobile-sidebar-header"] || l.$slots["sidebar-header"] ? {
+          name: "header",
+          fn: p(() => [
+            s(l.$slots, "mobile-sidebar-header", {}, () => [
+              s(l.$slots, "sidebar-header", {}, () => [
+                n[2] || (n[2] = E("Brand", -1))
+              ])
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["show", "triggerClass", "class"])
     ]));
   }
 });

package/components/DataTable/DataTable.vue.d.ts

@@ -31,15 +31,15 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
 }>, {
     variant: "default" | "raised";
     size: "xs" | "sm" | "md" | "lg";
+    compact: boolean;
     loading: boolean;
     striped: boolean;
-    compact: boolean;
     rows: any[];
     headers: TableHeader[];
     emptyIcon: string;
-    paginationProps: import('./types').DataTablePaginationProps;
-    hideSelectable: boolean;
     selectedRows: any[];
+    hideSelectable: boolean;
+    paginationProps: import('./types').DataTablePaginationProps;
     showPagination: boolean;
     cellBordered: boolean;
     keyField: string;

package/components/DataTable/DataTableRow.vue.d.ts

@@ -38,8 +38,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     }) => any;
 }>, {
     size: "xs" | "sm" | "md" | "lg";
-    striped: boolean;
     compact: boolean;
+    striped: boolean;
     selectable: boolean;
     isSelected: boolean;
     keyField: string;

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 r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-69b1b4ef"]]);
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-30cab34f"]]);
 export {
-  r as default
+  s as default
 };

package/components/Form/CustomFields.vue2.js

@@ -175,7 +175,17 @@ const ie = { class: "custom-fields-wrapper" }, ce = { class: "flex justify-betwe
         }, {
           default: N(() => [
             (n(!0), d(V, null, C(s.value, (o, l, h, c) => {
-              const b = [o, r.disabled, r.readonly, r.isUpdate, r.showRowNumbers, x.value, r.draggable, l, Y(l)];
+              const b = [
+                o,
+                r.disabled,
+                r.readonly,
+                r.isUpdate,
+                r.showRowNumbers,
+                x.value,
+                r.draggable,
+                l,
+                Y(l)
+              ];
               if (c && c.key === o._id && re(c, b)) return c;
               const f = (n(), d("div", {
                 key: o._id,
@@ -183,7 +193,10 @@ const ie = { class: "custom-fields-wrapper" }, ce = { class: "flex justify-betwe
               }, [
                 r.draggable && !r.disabled && !r.readonly ? (n(), d("div", {
                   key: 0,
-                  class: F(["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"])
+                  class: F([
+                    "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"
+                  ])
                 }, [
                   $(de, {
                     icon: "lucide:grip-vertical",