@orchidui/core 1.99.0 → 1.100.0

package/dist/{OcDataTable-CCM7iLFd.js → OcDataTable-DPwZCrNW.js}

@@ -1,18 +1,18 @@
-import { ref as P, onMounted as Ce, createBlock as L, openBlock as o, unref as n, withCtx as f, createVNode as I, createElementVNode as Q, createElementBlock as $, createCommentVNode as p, mergeProps as we, Fragment as ue, renderList as ae, normalizeClass as ie, toDisplayString as xe, computed as D, watch as $e, toRaw as We, nextTick as Xe, renderSlot as C, resolveDynamicComponent as Ye, createSlots as Ze, normalizeProps as Se, guardReactiveProps as Oe } from "vue";
-import { aG as Pe, B as Ae, C as He, E as _e, Q as el, a4 as ll, aR as al, aS as tl, aT as sl, K as ol, L as Ve, j as ul } from "./index-BFI9sA-S.js";
+import { ref as C, onMounted as Ce, createBlock as D, openBlock as o, unref as r, withCtx as y, createVNode as N, createElementVNode as q, createElementBlock as $, createCommentVNode as p, mergeProps as we, Fragment as ie, renderList as se, normalizeClass as re, toDisplayString as xe, computed as L, watch as $e, toRaw as Ze, nextTick as He, renderSlot as E, resolveDynamicComponent as _e, createSlots as el, normalizeProps as Se, guardReactiveProps as Oe } from "vue";
+import { aG as Pe, B as Ae, C as ll, E as al, Q as tl, a4 as sl, aR as ol, aS as ul, aT as il, aU as rl, K as nl, L as Ve, j as dl } from "./index-I7kkCShO.js";
 import { V as Fe } from "./vue-draggable-next.esm-bundler-QQ8zx__3.js";
-import { getFromLocalStorage as je, formatHeadersFromLocalStorage as Ke, formatHeadersToLocalStorage as il, setInLocalStorage as rl } from "./DataTable/utils/editColumnsUtils.js";
+import { getFromLocalStorage as je, formatHeadersFromLocalStorage as Ke, formatHeadersToLocalStorage as vl, setInLocalStorage as cl } from "./DataTable/utils/editColumnsUtils.js";
 import { _ as Ee } from "./OcIcon-CUKFUeB7.js";
-import { formatFilterDisplay as nl, clearAllFilters as dl } from "./DataTable/utils/filterUtils.js";
-import { formatCustomItemsPerPageOptions as vl, getItemsPerPageOptions as cl } from "./DataTable/utils/paginationUtils.js";
+import { formatFilterDisplay as ml, clearAllFilters as pl } from "./DataTable/utils/filterUtils.js";
+import { formatCustomItemsPerPageOptions as fl, getItemsPerPageOptions as yl } from "./DataTable/utils/paginationUtils.js";
 import "./dayjs.min-7xVZzECu.js";
-const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
+const gl = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, bl = {
   key: 0,
   class: "gap-y-2 flex flex-col border-b pb-3 border-oc-gray-200"
-}, pl = { class: "gap-y-2 flex flex-col" }, yl = {
+}, kl = { class: "gap-y-2 flex flex-col" }, hl = {
   key: 0,
   class: "flex items-center bg-white justify-between h-[26px]"
-}, gl = { class: "flex items-center w-full gap-x-3" }, bl = { class: "truncate w-full max-w-[160px]" }, kl = {
+}, wl = { class: "flex items-center w-full gap-x-3" }, xl = { class: "truncate w-full max-w-[160px]" }, $l = {
   __name: "ColumnEdit",
   props: {
     /** Initial active/visible state overrides for columns. Keyed by column key. */
@@ -39,55 +39,55 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
     /** Column order or visibility changed. Payload: `{ fixedHeaders, activeHeaders, isOnMount }`. */
     "update-order": []
   },
-  setup(k, { emit: oe }) {
-    const j = oe, h = k, m = P([]), S = P([]), O = P(!1), y = {
+  setup(k, { emit: ue }) {
+    const j = ue, h = k, f = C([]), S = C([]), O = C(!1), g = {
       handle: ".drag-el",
       filter: ".is-disabled",
       group: "headers",
       animation: 500,
       forceFallback: !1,
       move: (l) => l.to.dataset.activeHeaders ? !0 : !!l.draggedContext.futureIndex,
-      "onUpdate:modelValue": () => z()
-    }, z = (l = !1) => {
+      "onUpdate:modelValue": () => J()
+    }, J = (l = !1) => {
       S.value = S.value.map((d) => ({
         ...d,
         isActive: !0
       })), j("update-order", {
         fixedHeaders: S.value,
-        activeHeaders: m.value,
+        activeHeaders: f.value,
         isOnMount: l
       });
     };
     return Ce(() => {
       const l = je(h.localKey), { fixed: d, active: v } = Ke(l, h.headers, h.localKey);
-      S.value = d || h.headers.slice(0, 1), m.value = v || h.headers.slice(1).map((g) => {
-        var t, U, A;
+      S.value = d || h.headers.slice(0, 1), f.value = v || h.headers.slice(1).map((b) => {
+        var t, I, P;
         return {
-          ...g,
-          isActive: ((A = (U = (t = h.options) == null ? void 0 : t.active) == null ? void 0 : U.find((B) => B.key === g.key)) == null ? void 0 : A.isActive) ?? !0
+          ...b,
+          isActive: ((P = (I = (t = h.options) == null ? void 0 : t.active) == null ? void 0 : I.find((Q) => Q.key === b.key)) == null ? void 0 : P.isActive) ?? !0
         };
-      }), z(!0);
-    }), (l, d) => (o(), L(n(Pe), {
+      }), J(!0);
+    }), (l, d) => (o(), D(r(Pe), {
       modelValue: O.value,
       "onUpdate:modelValue": d[3] || (d[3] = (v) => O.value = v),
       "is-attach-to-body": ""
     }, {
-      menu: f(() => [
-        Q("div", ml, [
-          S.value.length ? (o(), $("div", fl, [
-            d[4] || (d[4] = Q("span", { class: "text-oc-text-400 font-medium" }, "Fixed columns", -1)),
-            I(n(Fe), we({
+      menu: y(() => [
+        q("div", gl, [
+          S.value.length ? (o(), $("div", bl, [
+            d[4] || (d[4] = q("span", { class: "text-oc-text-400 font-medium" }, "Fixed columns", -1)),
+            N(r(Fe), we({
               key: "key",
               modelValue: S.value,
               "onUpdate:modelValue": d[0] || (d[0] = (v) => S.value = v)
-            }, y), {
-              default: f(() => [
-                (o(!0), $(ue, null, ae(S.value, (v, g) => (o(), $("div", {
+            }, g), {
+              default: y(() => [
+                (o(!0), $(ie, null, se(S.value, (v, b) => (o(), $("div", {
                   key: v.key,
-                  class: ie(["flex items-center justify-between h-[26px]", g ? "" : "is-disabled"])
+                  class: re(["flex items-center justify-between h-[26px]", b ? "" : "is-disabled"])
                 }, [
-                  Q("span", null, xe(v.label), 1),
-                  g ? (o(), L(n(Ee), {
+                  q("span", null, xe(v.label), 1),
+                  b ? (o(), D(r(Ee), {
                     key: 0,
                     width: "18",
                     height: "18",
@@ -99,30 +99,30 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
               _: 1
             }, 16, ["modelValue"])
           ])) : p("", !0),
-          Q("div", pl, [
-            d[5] || (d[5] = Q("span", { class: "text-oc-text-400 font-medium" }, "Active columns", -1)),
-            I(n(Fe), we({
+          q("div", kl, [
+            d[5] || (d[5] = q("span", { class: "text-oc-text-400 font-medium" }, "Active columns", -1)),
+            N(r(Fe), we({
               key: "key",
-              modelValue: m.value,
-              "onUpdate:modelValue": d[2] || (d[2] = (v) => m.value = v)
-            }, y, { "data-active-headers": "true" }), {
-              default: f(() => [
-                (o(!0), $(ue, null, ae(m.value, (v) => (o(), $(ue, {
+              modelValue: f.value,
+              "onUpdate:modelValue": d[2] || (d[2] = (v) => f.value = v)
+            }, g, { "data-active-headers": "true" }), {
+              default: y(() => [
+                (o(!0), $(ie, null, se(f.value, (v) => (o(), $(ie, {
                   key: v.key
                 }, [
-                  v.key !== "actions" ? (o(), $("div", yl, [
-                    Q("div", gl, [
-                      I(n(He), {
+                  v.key !== "actions" ? (o(), $("div", hl, [
+                    q("div", wl, [
+                      N(r(ll), {
                         modelValue: v.isActive,
                         "onUpdate:modelValue": [
-                          (g) => v.isActive = g,
-                          d[1] || (d[1] = (g) => z())
+                          (b) => v.isActive = b,
+                          d[1] || (d[1] = (b) => J())
                         ],
                         class: "!w-fit"
                       }, null, 8, ["modelValue", "onUpdate:modelValue"]),
-                      Q("div", bl, xe(v.label), 1)
+                      q("div", xl, xe(v.label), 1)
                     ]),
-                    m.value.length > 1 ? (o(), L(n(Ee), {
+                    f.value.length > 1 ? (o(), D(r(Ee), {
                       key: 0,
                       width: "18",
                       height: "18",
@@ -137,8 +137,8 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
           ])
         ])
       ]),
-      default: f(() => [
-        I(n(Ae), {
+      default: y(() => [
+        N(r(Ae), {
           label: "Edit Column",
           "left-icon": "setting",
           size: "small",
@@ -149,22 +149,22 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
       _: 1
     }, 8, ["modelValue"]));
   }
-}, hl = { class: "relative flex flex-col gap-9" }, wl = {
+}, Sl = { class: "relative flex flex-col gap-9" }, Ol = {
   key: 0,
   class: "flex items-center px-4 min-h-[44px]"
-}, xl = {
+}, Vl = {
   key: 0,
   class: "absolute flex items-center gap-5 left-5"
-}, $l = {
+}, Fl = {
   key: 1,
   class: "absolute flex gap-3 left-5"
-}, Sl = {
+}, El = {
   key: 1,
   class: "flex justify-center w-full gap-5 md:justify-start"
-}, Ol = {
+}, Cl = {
   key: 2,
   class: "items-center hidden md:flex"
-}, Tl = {
+}, Il = {
   __name: "OcDataTable",
   props: {
     /** Show skeleton loading rows while data is being fetched. */
@@ -190,6 +190,7 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
      * `filterOptions` (optional) — filter toolbar config:
      * - `search` — `{ key, options? }` enables search bar
      * - `form` — FormBuilder jsonForm array rendered in the filter dropdown
+     * - `sort` — `{ key, options }` renders the Sort control; `key` is the filterData key holding `{ field, direction }`, `options` is the `{ label, value }` field list
      * - `tabs` — `{ key, options }` tab bar above the table
      * - `per_page` — `{ key }` controls which filter key holds items-per-page
      * - `columnEdit` — `{ key, localStorageKey }` enables column show/hide editor
@@ -272,15 +273,15 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
     /** Table has mounted and column order is initialized. */
     "on-table-ready": []
   },
-  setup(k, { emit: oe }) {
-    var ve, ce, me, fe, pe, ye, ge, be, ke;
-    const j = k, h = oe, m = D(() => {
+  setup(k, { emit: ue }) {
+    var ce, me, pe, fe, ye, ge, be, ke, he;
+    const j = k, h = ue, f = L(() => {
       var e;
       return (e = j.options) == null ? void 0 : e.cursor;
-    }), S = P(), O = D(() => {
+    }), S = C(), O = L(() => {
       var e;
       return (e = j.options) == null ? void 0 : e.tableOptions;
-    }), y = P({
+    }), g = C({
       total: 0,
       last_page: 1
     });
@@ -290,31 +291,31 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
         return (e = j.options) == null ? void 0 : e.pagination;
       },
       (e) => {
-        y.value = e;
+        g.value = e;
       },
       { deep: !0, immediate: !0 }
     );
-    const z = D(() => {
+    const J = L(() => {
       var a;
       return {
         ...O.value,
         headers: S.value ? S.value.map((u) => {
-          var r, i;
-          return u.class = ((i = (r = O.value) == null ? void 0 : r.headers.find((c) => c.key === u.key)) == null ? void 0 : i.class) ?? "", u;
+          var n, i;
+          return u.class = ((i = (n = O.value) == null ? void 0 : n.headers.find((c) => c.key === u.key)) == null ? void 0 : i.class) ?? "", u;
         }).filter((u) => u.isActive) : (a = O.value) == null ? void 0 : a.headers.filter((u) => Re(u.key))
       };
-    }), l = D(() => {
+    }), l = L(() => {
       var e;
       return (e = j.options) == null ? void 0 : e.filterOptions;
-    }), d = D(() => {
+    }), d = L(() => {
       var e;
       return (e = j.options) == null ? void 0 : e.hidePerPageDropdown;
-    }), v = D(() => {
+    }), v = L(() => {
       var e;
-      return ((e = y.value) == null ? void 0 : e.last_page) === 1;
-    }), g = JSON.parse(JSON.stringify(We(j.filter)));
-    !g && y.value ? g.page = 1 : !g && m && (g.cursor = "");
-    const t = P(g);
+      return ((e = g.value) == null ? void 0 : e.last_page) === 1;
+    }), b = JSON.parse(JSON.stringify(Ze(j.filter)));
+    !b && g.value ? b.page = 1 : !b && f && (b.cursor = "");
+    const t = C(b);
     $e(
       () => j.filter,
       (e) => {
@@ -322,97 +323,99 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
       },
       { deep: !0 }
     );
-    const U = P(!1), A = P(t.value[(ce = (ve = l.value) == null ? void 0 : ve.tabs) == null ? void 0 : ce.key]), B = P(t.value.page), q = P(
-      (fe = (me = l.value) == null ? void 0 : me.per_page) != null && fe.key ? t.value[(ye = (pe = l.value) == null ? void 0 : pe.per_page) == null ? void 0 : ye.key] : t.value.per_page
-    ), re = ((ke = t.value[t.value.selectedSearchOption || ((be = (ge = l.value) == null ? void 0 : ge.search) == null ? void 0 : be.key)]) == null ? void 0 : ke.trim()) ?? "", N = P(re ? re.split(",") : []), ne = P(!1), Te = D(
+    const I = C(!1), P = C(t.value[(me = (ce = l.value) == null ? void 0 : ce.tabs) == null ? void 0 : me.key]), Q = C(t.value.page), G = C(
+      (fe = (pe = l.value) == null ? void 0 : pe.per_page) != null && fe.key ? t.value[(ge = (ye = l.value) == null ? void 0 : ye.per_page) == null ? void 0 : ge.key] : t.value.per_page
+    ), ne = ((he = t.value[t.value.selectedSearchOption || ((ke = (be = l.value) == null ? void 0 : be.search) == null ? void 0 : ke.key)]) == null ? void 0 : he.trim()) ?? "", R = C(ne ? ne.split(",") : []), de = C(!1), Ue = L(
       () => {
         var e;
-        return vl((e = j.options) == null ? void 0 : e.perPageOptions);
+        return fl((e = j.options) == null ? void 0 : e.perPageOptions);
       }
-    ), De = D(() => cl(Te.value, y.value)), Le = D(() => {
+    ), Te = L(() => yl(Ue.value, g.value)), De = L(() => {
       var e;
       return ((e = j.selected) == null ? void 0 : e.length) > 0;
-    }), Ue = (e) => {
-      !e.trim() || !t.value.selectedSearchOption && N.value.includes(e) || (N.value = [e], K(), h("search-query-changed", e));
+    }), Le = (e) => {
+      !e.trim() || !t.value.selectedSearchOption && R.value.includes(e) || (R.value = [e], A(), h("search-query-changed", e));
     }, Ie = (e) => {
-      N.value = N.value.filter((a) => a !== e), K();
-    }, Ne = D(() => nl(t.value, l.value)), Re = (e) => {
-      var a, u, r, i, c, w;
-      return ((w = (c = (i = (r = t.value) == null ? void 0 : r[(u = (a = l.value) == null ? void 0 : a.columnEdit) == null ? void 0 : u.key]) == null ? void 0 : i.active) == null ? void 0 : c.find((V) => V.key === e)) == null ? void 0 : w.isActive) ?? !0;
+      R.value = R.value.filter((a) => a !== e), A();
+    }, Ne = L(() => ml(t.value, l.value)), Re = (e) => {
+      var a, u, n, i, c, w;
+      return ((w = (c = (i = (n = t.value) == null ? void 0 : n[(u = (a = l.value) == null ? void 0 : a.columnEdit) == null ? void 0 : u.key]) == null ? void 0 : i.active) == null ? void 0 : c.find((V) => V.key === e)) == null ? void 0 : w.isActive) ?? !0;
     }, Be = ({ fixedHeaders: e, activeHeaders: a, isOnMount: u }) => {
-      var r, i, c, w, V, s, T, x;
-      if (t.value[(i = (r = l.value) == null ? void 0 : r.columnEdit) == null ? void 0 : i.key] || (t.value[(w = (c = l.value) == null ? void 0 : c.columnEdit) == null ? void 0 : w.key] = {}), t.value[(s = (V = l.value) == null ? void 0 : V.columnEdit) == null ? void 0 : s.key].fixed = e, t.value[(x = (T = l.value) == null ? void 0 : T.columnEdit) == null ? void 0 : x.key].active = a, S.value = [...e, ...a], !u) {
-        const F = il(e, a);
-        rl(l.value.columnEdit.localStorageKey, F);
+      var n, i, c, w, V, K, s, U;
+      if (t.value[(i = (n = l.value) == null ? void 0 : n.columnEdit) == null ? void 0 : i.key] || (t.value[(w = (c = l.value) == null ? void 0 : c.columnEdit) == null ? void 0 : w.key] = {}), t.value[(K = (V = l.value) == null ? void 0 : V.columnEdit) == null ? void 0 : K.key].fixed = e, t.value[(U = (s = l.value) == null ? void 0 : s.columnEdit) == null ? void 0 : U.key].active = a, S.value = [...e, ...a], !u) {
+        const F = vl(e, a);
+        cl(l.value.columnEdit.localStorageKey, F);
       }
       h("columns-changed", a);
     }, Qe = () => {
-      var e, a, u, r, i, c;
+      var e, a, u, n, i, c;
       if ((a = (e = l.value) == null ? void 0 : e.columnEdit) != null && a.localStorageKey) {
         const w = je(l.value.columnEdit.localStorageKey);
         if (w) {
-          const { fixed: V, active: s } = Ke(
+          const { fixed: V, active: K } = Ke(
             w,
             O.value.headers,
             l.value.columnEdit.localStorageKey
           );
-          t.value[(r = (u = l.value) == null ? void 0 : u.columnEdit) == null ? void 0 : r.key].fixed = V, t.value[(c = (i = l.value) == null ? void 0 : i.columnEdit) == null ? void 0 : c.key].active = s, S.value = [...V, ...s];
+          t.value[(n = (u = l.value) == null ? void 0 : u.columnEdit) == null ? void 0 : n.key].fixed = V, t.value[(c = (i = l.value) == null ? void 0 : i.columnEdit) == null ? void 0 : c.key].active = K, S.value = [...V, ...K];
         }
       }
     }, ze = (e) => {
       t.value.selectedSearchOption = e;
     }, qe = () => {
-      var a, u, r, i;
-      N.value = [], A.value = "";
-      const e = (u = (a = l.value) == null ? void 0 : a.tabs) != null && u.filter_name ? g[(i = (r = l.value) == null ? void 0 : r.tabs) == null ? void 0 : i.key] : A.value;
-      t.value = dl(
+      var a, u, n, i;
+      R.value = [], P.value = "";
+      const e = (u = (a = l.value) == null ? void 0 : a.tabs) != null && u.filter_name ? b[(i = (n = l.value) == null ? void 0 : n.tabs) == null ? void 0 : i.key] : P.value;
+      t.value = pl(
         t.value,
         l.value,
-        q.value,
+        G.value,
         e
-      ), K();
+      ), A();
     }, Je = () => {
-      K(null, B.value);
-    }, K = (e = null, a = !1, u = "", r = !1, i = !1) => {
-      var w, V, s, T, x, F, R, G, M, W, X, Y, Z, H, _, ee, le, b, te;
-      y.value && !a && (B.value = 1), y.value ? t.value.page = B.value : t.value.cursor = u, (w = l.value) != null && w.per_page ? t.value[l.value.per_page.key] = q.value : t.value.per_page = q.value, (V = l.value) != null && V.tabs && i && (t.value[l.value.tabs.key] = A.value), (T = (s = l.value) == null ? void 0 : s.tabs) != null && T.filter_name && (i ? t.value[(F = (x = l.value) == null ? void 0 : x.tabs) == null ? void 0 : F.filter_name] = null : e && (A.value = null)), (R = l.value) != null && R.search && ((M = (G = l.value.search) == null ? void 0 : G.options) != null && M.length ? (Object.keys(t.value).forEach((E) => {
-        var J;
-        (J = l.value.search.options) != null && J.map((se) => se.value).includes(E) && delete t.value[E];
-      }), t.value[((W = t.value) == null ? void 0 : W.selectedSearchOption) || ((Z = (Y = (X = l.value.search) == null ? void 0 : X.options) == null ? void 0 : Y[0]) == null ? void 0 : Z.value) || l.value.search.key] = N.value.join()) : t.value[l.value.search.key] = N.value.join()), e && (U.value = !1, t.value = { ...t.value, ...e }, Object.keys(t.value).forEach((E) => {
-        Array.isArray(t.value[E]) && t.value[E].length === 0 && delete t.value[E];
+      A(null, Q.value);
+    }, A = (e = null, a = !1, u = "", n = !1, i = !1) => {
+      var w, V, K, s, U, F, T, M, B, W, X, Y, Z, H, _, ee, le, ae, te;
+      g.value && !a && (Q.value = 1), g.value ? t.value.page = Q.value : t.value.cursor = u, (w = l.value) != null && w.per_page ? t.value[l.value.per_page.key] = G.value : t.value.per_page = G.value, (V = l.value) != null && V.tabs && i && (t.value[l.value.tabs.key] = P.value), (s = (K = l.value) == null ? void 0 : K.tabs) != null && s.filter_name && (i ? t.value[(F = (U = l.value) == null ? void 0 : U.tabs) == null ? void 0 : F.filter_name] = null : e && (P.value = null)), (T = l.value) != null && T.search && ((B = (M = l.value.search) == null ? void 0 : M.options) != null && B.length ? (Object.keys(t.value).forEach((x) => {
+        var z;
+        (z = l.value.search.options) != null && z.map((m) => m.value).includes(x) && delete t.value[x];
+      }), t.value[((W = t.value) == null ? void 0 : W.selectedSearchOption) || ((Z = (Y = (X = l.value.search) == null ? void 0 : X.options) == null ? void 0 : Y[0]) == null ? void 0 : Z.value) || l.value.search.key] = R.value.join()) : t.value[l.value.search.key] = R.value.join()), e && (I.value = !1, t.value = { ...t.value, ...e }, Object.keys(t.value).forEach((x) => {
+        Array.isArray(t.value[x]) && t.value[x].length === 0 && delete t.value[x];
       }));
       let c = (_ = (H = l.value) == null ? void 0 : H.tabs) == null ? void 0 : _.key;
-      if (c && A.value !== t.value[c] && !((le = (ee = l.value) == null ? void 0 : ee.tabs) != null && le.filter_name)) {
-        const E = (te = (b = l.value.tabs) == null ? void 0 : b.options) == null ? void 0 : te.find(
-          (J) => {
-            var se, he;
-            return ((se = J.value) == null ? void 0 : se.toString()) === ((he = t.value[c]) == null ? void 0 : he.toString());
+      if (c && P.value !== t.value[c] && !((le = (ee = l.value) == null ? void 0 : ee.tabs) != null && le.filter_name)) {
+        const x = (te = (ae = l.value.tabs) == null ? void 0 : ae.options) == null ? void 0 : te.find(
+          (z) => {
+            var m, oe;
+            return ((m = z.value) == null ? void 0 : m.toString()) === ((oe = t.value[c]) == null ? void 0 : oe.toString());
           }
         );
-        E != null && E.value && (A.value = E.value, i || K(null, !1, "", !1, !0));
+        x != null && x.value && (P.value = x.value, i || A(null, !1, "", !1, !0));
       }
-      Ge(r);
-    }, de = P(null), Ge = (e = !1) => {
-      clearTimeout(de.value), de.value = setTimeout(() => {
+      Me(n);
+    }, Ge = (e) => {
+      t.value[l.value.sort.key] = e, A();
+    }, ve = C(null), Me = (e = !1) => {
+      clearTimeout(ve.value), ve.value = setTimeout(() => {
         h("update:filter", { ...t.value }, e), h("apply-filter", { ...t.value }, e);
       }, 50);
-    }, Me = (e, a) => {
-      (a === l.value.tabs.key || a === "tabs") && (A.value = ""), K(e), h("filter-removed", a);
+    }, We = (e, a) => {
+      (a === l.value.tabs.key || a === "tabs") && (P.value = ""), A(e), h("filter-removed", a);
     };
     return Ce(() => {
-      Qe(), Xe(() => {
+      Qe(), He(() => {
         h("on-table-ready");
       });
     }), (e, a) => {
-      var u, r, i, c, w, V;
-      return o(), $("div", hl, [
-        z.value ? (o(), L(Ye(k.isNewTable ? n(_e) : n(el)), {
+      var u, n, i, c, w, V, K;
+      return o(), $("div", Sl, [
+        J.value ? (o(), D(_e(k.isNewTable ? r(al) : r(tl)), {
           key: 0,
           selected: k.selected,
           "row-key": k.rowKey,
-          options: z.value,
+          options: J.value,
           "is-loading": k.isLoading,
-          "loading-rows": q.value,
+          "loading-rows": G.value,
           "row-class": k.rowClass,
           "row-link": k.rowLink,
           "selected-index": k.selectedIndex,
@@ -422,103 +425,103 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
           "onUpdate:selected": a[8] || (a[8] = (s) => e.$emit("update:selected", s)),
           "onClick:row": a[9] || (a[9] = (s) => e.$emit("click:row", s)),
           "onHover:cell": a[10] || (a[10] = (s) => e.$emit("hover:cell", s))
-        }, Ze({
-          after: f(() => [
-            C(e.$slots, "after")
+        }, el({
+          after: y(() => [
+            E(e.$slots, "after")
           ]),
-          empty: f(() => [
-            C(e.$slots, "empty")
+          empty: y(() => [
+            E(e.$slots, "empty")
           ]),
-          "table-header": f((s) => [
-            C(e.$slots, "table-header", Se(Oe(s)))
+          "table-header": y((s) => [
+            E(e.$slots, "table-header", Se(Oe(s)))
           ]),
-          "table-body": f((s) => [
-            C(e.$slots, "table-body", Se(Oe(s)))
+          "table-body": y((s) => [
+            E(e.$slots, "table-body", Se(Oe(s)))
           ]),
-          "after-rows": f(() => [
-            C(e.$slots, "after-rows")
+          "after-rows": y(() => [
+            E(e.$slots, "after-rows")
           ]),
           _: 2
         }, [
-          e.$slots.before || (u = l.value) != null && u.search || (r = l.value) != null && r.form || (i = l.value) != null && i.tabs ? {
+          e.$slots.before || (u = l.value) != null && u.search || (n = l.value) != null && n.form || (i = l.value) != null && i.tabs || (c = l.value) != null && c.sort ? {
             name: "before",
-            fn: f(() => {
-              var s, T, x, F;
+            fn: y(() => {
+              var s, U, F, T, M;
               return [
-                C(e.$slots, "before"),
-                (s = l.value) != null && s.search || (T = l.value) != null && T.form || (x = l.value) != null && x.tabs ? (o(), $("div", wl, [
-                  Le.value ? (o(), $("div", xl, [
-                    C(e.$slots, "bulk-actions", { selectedRows: k.selected })
-                  ])) : (o(), $("div", $l, [
-                    (F = l.value) != null && F.tabs ? (o(), L(n(ll), {
+                E(e.$slots, "before"),
+                (s = l.value) != null && s.search || (U = l.value) != null && U.form || (F = l.value) != null && F.tabs || (T = l.value) != null && T.sort ? (o(), $("div", Ol, [
+                  De.value ? (o(), $("div", Vl, [
+                    E(e.$slots, "bulk-actions", { selectedRows: k.selected })
+                  ])) : (o(), $("div", Fl, [
+                    (M = l.value) != null && M.tabs ? (o(), D(r(sl), {
                       key: 0,
-                      modelValue: A.value,
+                      modelValue: P.value,
                       "onUpdate:modelValue": [
-                        a[0] || (a[0] = (R) => A.value = R),
-                        a[1] || (a[1] = (R) => K(null, !1, "", !1, !0))
+                        a[0] || (a[0] = (B) => P.value = B),
+                        a[1] || (a[1] = (B) => A(null, !1, "", !1, !0))
                       ],
                       "is-disabled": k.isLoading,
                       tabs: l.value.tabs.options,
                       variant: "pills"
                     }, null, 8, ["modelValue", "is-disabled", "tabs"])) : p("", !0)
                   ])),
-                  C(e.$slots, "filter-options", {}, () => {
-                    var R, G, M, W, X, Y, Z, H, _, ee, le;
+                  E(e.$slots, "filter-options", {}, () => {
+                    var B, W, X, Y, Z, H, _, ee, le, ae, te, x, z;
                     return [
-                      (R = l.value) != null && R.search || (G = l.value) != null && G.form || (M = l.value) != null && M.columnEdit ? (o(), $("div", {
+                      (B = l.value) != null && B.search || (W = l.value) != null && W.form || (X = l.value) != null && X.sort || (Y = l.value) != null && Y.columnEdit ? (o(), $("div", {
                         key: 0,
-                        class: ie([
+                        class: re([
                           "flex gap-3 absolute ml-auto items-center bg-oc-bg-light right-4 max-w-[calc(100%-24px)]",
-                          l.value ? ne.value ? "md:w-fit w-full" : "" : "w-full justify-end"
+                          l.value ? de.value ? "md:w-fit w-full" : "" : "w-full justify-end"
                         ])
                       }, [
-                        (W = l.value) != null && W.search ? (o(), L(n(al), {
+                        (Z = l.value) != null && Z.search ? (o(), D(r(ol), {
                           key: 0,
                           "is-search-only": !l.value.tabs || l.value.isSearchOnly,
-                          "search-options": ((X = l.value.search) == null ? void 0 : X.options) ?? [],
-                          "selected-option": (((Y = t.value) == null ? void 0 : Y.selectedSearchOption) || ((_ = (H = (Z = l.value.search) == null ? void 0 : Z.options) == null ? void 0 : H[0]) == null ? void 0 : _.value)) ?? "keywords",
-                          onAddQuery: Ue,
-                          onToggle: a[2] || (a[2] = (b) => ne.value = b),
+                          "search-options": ((H = l.value.search) == null ? void 0 : H.options) ?? [],
+                          "selected-option": (((_ = t.value) == null ? void 0 : _.selectedSearchOption) || ((ae = (le = (ee = l.value.search) == null ? void 0 : ee.options) == null ? void 0 : le[0]) == null ? void 0 : ae.value)) ?? "keywords",
+                          onAddQuery: Le,
+                          onToggle: a[2] || (a[2] = (m) => de.value = m),
                           onChangeSearchKey: ze
                         }, null, 8, ["is-search-only", "search-options", "selected-option"])) : p("", !0),
-                        (ee = l.value) != null && ee.form ? (o(), L(n(Pe), {
+                        (te = l.value) != null && te.form ? (o(), D(r(Pe), {
                           key: 1,
-                          modelValue: U.value,
+                          modelValue: I.value,
                           "onUpdate:modelValue": [
-                            a[6] || (a[6] = (b) => U.value = b),
-                            a[7] || (a[7] = (b) => e.$emit("filter-open", b))
+                            a[6] || (a[6] = (m) => I.value = m),
+                            a[7] || (a[7] = (m) => e.$emit("filter-open", m))
                           ],
                           distance: 9,
                           placement: "bottom-end",
                           "is-attach-to-body": "",
                           "max-menu-height": 500
                         }, {
-                          menu: f(() => [
-                            U.value ? (o(), L(n(tl), {
+                          menu: y(() => [
+                            I.value ? (o(), D(r(ul), {
                               key: 0,
                               id: k.id,
                               "json-form": l.value.form ?? [],
                               grid: l.value.grid ?? null,
                               values: t.value,
                               actions: l.value.actions,
-                              onApplyFilter: a[3] || (a[3] = (b) => K(b)),
-                              onFilterFieldsChanged: a[4] || (a[4] = (b) => h("filter-fields-changed", b)),
-                              onCancel: a[5] || (a[5] = (b) => U.value = !1)
+                              onApplyFilter: a[3] || (a[3] = (m) => A(m)),
+                              onFilterFieldsChanged: a[4] || (a[4] = (m) => h("filter-fields-changed", m)),
+                              onCancel: a[5] || (a[5] = (m) => I.value = !1)
                             }, {
-                              default: f(({ errors: b, values: te, jsonForm: E, updateForm: J }) => [
-                                C(e.$slots, "custom-filter-form", {
-                                  errors: b,
-                                  values: te,
-                                  jsonForm: E,
-                                  updateFilter: J
+                              default: y(({ errors: m, values: oe, jsonForm: Xe, updateForm: Ye }) => [
+                                E(e.$slots, "custom-filter-form", {
+                                  errors: m,
+                                  values: oe,
+                                  jsonForm: Xe,
+                                  updateFilter: Ye
                                 })
                               ]),
                               _: 3
                             }, 8, ["id", "json-form", "grid", "values", "actions"])) : p("", !0)
                           ]),
-                          default: f(() => [
-                            I(n(Ae), {
-                              "is-active": U.value,
+                          default: y(() => [
+                            N(r(Ae), {
+                              "is-active": I.value,
                               variant: "secondary",
                               "left-icon": "filter",
                               size: "small",
@@ -528,10 +531,16 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
                           ]),
                           _: 3
                         }, 8, ["modelValue"])) : p("", !0),
-                        l.value.columnEdit ? (o(), L(kl, {
+                        (x = l.value) != null && x.sort ? (o(), D(r(il), {
                           key: 2,
+                          "sort-options": l.value.sort.options ?? [],
+                          "model-value": t.value[l.value.sort.key],
+                          "onUpdate:modelValue": Ge
+                        }, null, 8, ["sort-options", "model-value"])) : p("", !0),
+                        l.value.columnEdit ? (o(), D($l, {
+                          key: 3,
                           options: t.value.columnEdit,
-                          headers: ((le = O.value) == null ? void 0 : le.headers) || [],
+                          headers: ((z = O.value) == null ? void 0 : z.headers) || [],
                           "local-key": l.value.columnEdit.localStorageKey,
                           onUpdateOrder: Be
                         }, null, 8, ["options", "headers", "local-key"])) : p("", !0)
@@ -539,85 +548,85 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
                     ];
                   })
                 ])) : p("", !0),
-                I(n(sl), {
+                N(r(rl), {
                   filters: Ne.value,
-                  queries: N.value,
+                  queries: R.value,
                   class: "border-t border-oc-gray-200",
                   onRemoveQuery: Ie,
                   onRemoveAll: qe,
-                  onRemoveFilter: Me
+                  onRemoveFilter: We
                 }, null, 8, ["filters", "queries"])
               ];
             }),
             key: "0"
           } : void 0,
-          ae((c = O.value) == null ? void 0 : c.headers, (s, T) => ({
+          se((w = O.value) == null ? void 0 : w.headers, (s, U) => ({
             name: s.key,
-            fn: f(({ data: x, item: F }) => [
-              C(e.$slots, s.key, {
-                data: x,
-                item: F
+            fn: y(({ data: F, item: T }) => [
+              E(e.$slots, s.key, {
+                data: F,
+                item: T
               })
             ])
           })),
-          ae((w = O.value) == null ? void 0 : w.headers, (s, T) => ({
+          se((V = O.value) == null ? void 0 : V.headers, (s, U) => ({
             name: `header-${s.key}-tooltip`,
-            fn: f(({ data: x, item: F }) => [
-              C(e.$slots, `header-${s.key}-tooltip`, {
-                data: x,
-                item: F
+            fn: y(({ data: F, item: T }) => [
+              E(e.$slots, `header-${s.key}-tooltip`, {
+                data: F,
+                item: T
               })
             ])
           })),
-          ae((V = O.value) == null ? void 0 : V.headers, (s, T) => ({
+          se((K = O.value) == null ? void 0 : K.headers, (s, U) => ({
             name: `header-${s.key}-left-tooltip`,
-            fn: f(({ data: x, item: F }) => [
-              C(e.$slots, `header-${s.key}-left-tooltip`, {
-                data: x,
-                item: F
+            fn: y(({ data: F, item: T }) => [
+              E(e.$slots, `header-${s.key}-left-tooltip`, {
+                data: F,
+                item: T
               })
             ])
           }))
         ]), 1064, ["selected", "row-key", "options", "is-loading", "loading-rows", "row-class", "row-link", "selected-index", "disabled-rows", "is-sticky", "is-borderless"])) : p("", !0),
-        C(e.$slots, "before-pagination"),
-        y.value || m.value ? (o(), $("div", {
+        E(e.$slots, "before-pagination"),
+        g.value || f.value ? (o(), $("div", {
           key: 1,
-          class: ie(["flex items-center gap-3", y.value && y.value.last_page === 1 ? "justify-end" : ""])
+          class: re(["flex items-center gap-3", g.value && g.value.last_page === 1 ? "justify-end" : ""])
         }, [
-          y.value && !v.value ? (o(), L(n(ol), {
+          g.value && !v.value ? (o(), D(r(nl), {
             key: 0,
-            modelValue: B.value,
+            modelValue: Q.value,
             "onUpdate:modelValue": [
-              a[11] || (a[11] = (s) => B.value = s),
+              a[11] || (a[11] = (s) => Q.value = s),
               Je
             ],
             class: "justify-center text-[13px]",
-            "max-page": y.value.last_page,
-            strategy: y.value.strategy,
+            "max-page": g.value.last_page,
+            strategy: g.value.strategy,
             "total-visible": "5"
           }, null, 8, ["modelValue", "max-page", "strategy"])) : p("", !0),
-          m.value ? (o(), $("div", Sl, [
-            I(n(Ve), {
-              disabled: !m.value.prev,
-              onClick: a[12] || (a[12] = (s) => m.value.prev ? K(null, !1, m.value.prev) : null)
+          f.value ? (o(), $("div", El, [
+            N(r(Ve), {
+              disabled: !f.value.prev,
+              onClick: a[12] || (a[12] = (s) => f.value.prev ? A(null, !1, f.value.prev) : null)
             }, null, 8, ["disabled"]),
-            I(n(Ve), {
-              disabled: !m.value.next,
+            N(r(Ve), {
+              disabled: !f.value.next,
               "is-next": "",
-              onClick: a[13] || (a[13] = (s) => m.value.next ? K(null, !1, m.value.next) : null)
+              onClick: a[13] || (a[13] = (s) => f.value.next ? A(null, !1, f.value.next) : null)
             }, null, 8, ["disabled"])
           ])) : p("", !0),
-          d.value ? p("", !0) : (o(), $("div", Ol, [
-            I(n(ul), {
-              modelValue: q.value,
+          d.value ? p("", !0) : (o(), $("div", Cl, [
+            N(r(dl), {
+              modelValue: G.value,
               "onUpdate:modelValue": [
-                a[14] || (a[14] = (s) => q.value = s),
-                a[15] || (a[15] = (s) => K(null))
+                a[14] || (a[14] = (s) => G.value = s),
+                a[15] || (a[15] = (s) => A(null))
               ],
               label: "Item per page",
               "is-inline-label": "",
               "popper-options": { placement: "auto" },
-              options: De.value,
+              options: Te.value,
               "select-text-class": "!text-[13px]"
             }, null, 8, ["modelValue", "options"])
           ]))
@@ -627,5 +636,5 @@ const ml = { class: "p-5 gap-y-4 text-sm flex w-[250px] flex-col" }, fl = {
   }
 };
 export {
-  Tl as default
+  Il as default
 };