@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/table/Table.vue.js

@@ -1,13 +1,14 @@
-import { defineComponent as N, openBlock as s, createElementBlock as a, createElementVNode as T, normalizeStyle as x, unref as i, normalizeClass as g, createVNode as f, withCtx as u, Fragment as d, renderList as c, createBlock as m, createTextVNode as v, toDisplayString as b, renderSlot as H, createCommentVNode as S } from "vue";
-import { useTheme as V } from "../../composables/theme.js";
-import z from "./TableHead.js";
-import X from "./TableHeader.vue.js";
-import h from "./TableBody.js";
-import E from "./TableRow.vue.js";
-import D from "./TableCell.vue.js";
-import F from "../spinner/Spinner.vue.js";
-import I from "./Table.theme.js";
-const L = { class: "w-full overflow-x-auto" }, P = {
+import { defineComponent as J, ref as X, watch as F, resolveComponent as O, openBlock as n, createElementBlock as i, normalizeClass as p, unref as c, renderSlot as d, createElementVNode as f, normalizeStyle as P, createVNode as m, withCtx as u, createBlock as y, createCommentVNode as b, Fragment as k, renderList as v, createTextVNode as C, toDisplayString as N } from "vue";
+import { useTheme as W } from "../../composables/useTheme.js";
+import q from "./TableHead.vue.js";
+import S from "./TableHeader.vue.js";
+import G from "./TableBody.js";
+import z from "./TableRow.vue.js";
+import _ from "./TableCell.vue.js";
+import K from "../spinner/Spinner.vue.js";
+import M from "../skeleton/Skeleton.vue.js";
+import { chevronDownIcon as Q } from "../../common/icons.js";
+const R = { key: 1 }, U = ["colspan"], Y = { key: 2 }, Z = ["colspan"], j = ["onClick"], x = { key: 0 }, ee = { colspan: "999" }, te = {
   headers: {
     type: Array,
     default: () => []
@@ -21,6 +22,12 @@ const L = { class: "w-full overflow-x-auto" }, P = {
     default: () => []
   },
   loading: Boolean,
+  loadingSkeleton: Boolean,
+  loadingLines: {
+    type: [Number, String],
+    default: 3
+  },
+  error: Boolean,
   dense: Boolean,
   fixed: Boolean,
   striped: Boolean,
@@ -32,116 +39,219 @@ const L = { class: "w-full overflow-x-auto" }, P = {
   stickyHeader: {
     type: Boolean,
     default: !0
-  }
-}, W = { name: "XTable" }, Z = /* @__PURE__ */ N({
-  ...W,
+  },
+  expandable: Boolean
+}, ne = { name: "XTable" }, fe = /* @__PURE__ */ J({
+  ...ne,
   props: {
-    ...P,
+    ...te,
     items: {
       type: Array,
       default: () => []
     }
   },
   emits: ["update:sort", "click-row"],
-  setup(p, { emit: B }) {
-    const y = p;
-    function $(t, r) {
-      if (t)
-        for (let e = 0; e < r.length; e++) {
-          const { 0: l, 1: o } = r[e].split(",");
-          if (t === l)
+  setup(h, { emit: A }) {
+    const $ = h;
+    function T(e) {
+      try {
+        return JSON.parse(JSON.stringify(e));
+      } catch {
+        return [];
+      }
+    }
+    const g = X([]);
+    F(() => $.items, (e) => {
+      $.expandable && (g.value = T(e));
+    }, { immediate: !0 });
+    const H = A;
+    function V(e, l) {
+      if (e)
+        for (let r = 0; r < l.length; r++) {
+          const { 0: t, 1: o } = l[r].split(",");
+          if (e === t)
             return parseInt(o) > 0 ? 1 : -1;
         }
     }
-    function _(t) {
-      const r = y.sort.slice(0);
-      let e = !1;
-      for (let l = 0; l < r.length; l++) {
-        const { 0: o, 1: n } = r[l].split(",");
-        if (o === t.value) {
-          if (e = !0, n === "-1") {
-            r.splice(l, 1, `${t.value},1`);
+    function I(e) {
+      const l = $.sort.slice(0);
+      let r = !1;
+      for (let t = 0; t < l.length; t++) {
+        const { 0: o, 1: s } = l[t].split(",");
+        if (o === e.value) {
+          if (r = !0, s === "-1") {
+            l.splice(t, 1, `${e.value},1`);
             break;
-          } else if (n === "1") {
-            r.splice(l, 1);
+          } else if (s === "1") {
+            l.splice(t, 1);
             break;
           }
         }
       }
-      e || r.push(`${t.value},-1`), B("update:sort", r);
+      r || l.push(`${e.value},-1`), H("update:sort", l);
     }
-    function w(t, r) {
-      if (!r)
+    function L(e, l) {
+      if (!l)
         return "";
-      const e = Array.isArray(r) ? r : r.match(/([^[.\]])+/g);
-      return (e == null ? void 0 : e.reduce((o, n) => o && o[n], t)) ?? "";
+      const r = Array.isArray(l) ? l : l.match(/([^[.\]])+/g);
+      return (r == null ? void 0 : r.reduce((o, s) => o && o[s], e)) ?? "";
     }
-    const { styles: C, classes: k, className: A } = V("table", I, y);
-    return (t, r) => (s(), a("div", L, [
-      T("table", {
-        style: x(i(C)),
-        class: g([
-          i(A),
-          i(k).wrapper
-        ])
+    const { styles: D, classes: w, className: E } = W("Table", {}, $);
+    return (e, l) => {
+      const r = O("x-icon");
+      return n(), i("div", {
+        class: p([c(E), c(w).wrapper])
       }, [
-        f(i(z), null, {
-          default: u(() => [
-            (s(!0), a(d, null, c(t.headers, (e, l) => (s(), m(X, {
-              key: l,
-              "sticky-header": t.stickyHeader,
-              "text-align": e.align,
-              sort: $(e.value, t.sort),
-              sortable: e.sortable,
-              width: e.width,
-              onClick: (o) => e.sortable ? _(e) : null
-            }, {
-              default: u(() => [
-                v(b(e.text), 1)
-              ]),
-              _: 2
-            }, 1032, ["sticky-header", "text-align", "sort", "sortable", "width", "onClick"]))), 128))
-          ]),
-          _: 1
-        }),
-        f(i(h), null, {
-          default: u(() => [
-            (s(!0), a(d, null, c(p.items, (e, l) => (s(), m(E, {
-              key: l,
-              pointer: t.pointer,
-              striped: t.striped,
-              onClick: (o) => t.$emit("click-row", e)
-            }, {
-              default: u(() => [
-                (s(!0), a(d, null, c(t.headers, (o, n) => (s(), m(D, {
-                  key: n,
-                  "text-align": o.align,
-                  dense: t.dense,
-                  fixed: t.fixed
-                }, {
-                  default: u(() => [
-                    H(t.$slots, `item-${o.value}`, { item: e }, () => [
-                      v(b(w(e, o.value)), 1)
-                    ])
-                  ]),
-                  _: 2
-                }, 1032, ["text-align", "dense", "fixed"]))), 128))
-              ]),
-              _: 2
-            }, 1032, ["pointer", "striped", "onClick"]))), 128))
-          ]),
-          _: 3
-        }),
-        t.loading ? (s(), a("div", {
-          key: 0,
-          class: g(i(k).loadingWrapper)
+        d(e.$slots, "title"),
+        d(e.$slots, "actions"),
+        f("table", {
+          style: P(c(D)),
+          class: p(c(w).table)
         }, [
-          f(F, { size: "lg" })
-        ], 2)) : S("", !0)
-      ], 6)
-    ]));
+          m(q, null, {
+            default: u(() => [
+              e.expandable ? (n(), y(S, {
+                key: 0,
+                width: "48",
+                class: "!p-0",
+                "sticky-header": e.stickyHeader
+              }, null, 8, ["sticky-header"])) : b("", !0),
+              (n(!0), i(k, null, v(e.headers, (t, o) => (n(), y(S, {
+                key: o,
+                "sticky-header": e.stickyHeader,
+                "text-align": t.align,
+                sort: V(t.value, e.sort),
+                sortable: t.sortable,
+                width: t.width,
+                onClick: (s) => t.sortable ? I(t) : null
+              }, {
+                default: u(() => [
+                  d(e.$slots, `header-${t.value}`, { header: t }, () => [
+                    C(N(t.text), 1)
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["sticky-header", "text-align", "sort", "sortable", "width", "onClick"]))), 128))
+            ]),
+            _: 3
+          }),
+          m(c(G), null, {
+            default: u(() => [
+              e.loading ? (n(!0), i(k, { key: 0 }, v(Number(e.loadingLines), (t, o) => (n(), y(z, {
+                key: o,
+                striped: e.striped
+              }, {
+                default: u(() => [
+                  (n(!0), i(k, null, v(e.headers, (s, a) => (n(), y(_, {
+                    key: a,
+                    "text-align": s.align,
+                    width: s.width,
+                    dense: e.dense,
+                    fixed: e.fixed
+                  }, {
+                    default: u(() => [
+                      d(e.$slots, `loading-${s.value}`, { item: t }, () => [
+                        m(M, {
+                          class: p(["max-w-[60%]", {
+                            "mx-auto": s.align === "center",
+                            "ml-auto": s.align === "right"
+                          }]),
+                          shape: s.skeletonShape || "line"
+                        }, null, 8, ["shape", "class"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
+                ]),
+                _: 2
+              }, 1032, ["striped"]))), 128)) : e.error ? (n(), i("tr", R, [
+                f("td", {
+                  colspan: e.headers.length
+                }, [
+                  d(e.$slots, "error")
+                ], 8, U)
+              ])) : !h.items || h.items.length === 0 ? (n(), i("tr", Y, [
+                f("td", {
+                  colspan: e.headers.length
+                }, [
+                  d(e.$slots, "empty")
+                ], 8, Z)
+              ])) : (n(!0), i(k, { key: 3 }, v(h.items, (t, o) => {
+                var s;
+                return n(), i(k, { key: o }, [
+                  m(z, {
+                    pointer: e.pointer,
+                    striped: e.striped,
+                    onClick: (a) => e.$emit("click-row", t)
+                  }, {
+                    default: u(() => [
+                      e.expandable ? (n(), y(_, {
+                        key: 0,
+                        width: "48",
+                        class: "!p-1"
+                      }, {
+                        default: u(() => {
+                          var a;
+                          return [
+                            f("button", {
+                              class: "p-4",
+                              onClick: (B) => g.value[o].__expanded = !g.value[o].__expanded
+                            }, [
+                              m(r, {
+                                icon: c(Q),
+                                size: e.dense ? "xs" : "md",
+                                class: p(["transition-transform", {
+                                  "rotate-180": (a = g.value[o]) == null ? void 0 : a.__expanded
+                                }])
+                              }, null, 8, ["icon", "size", "class"])
+                            ], 8, j)
+                          ];
+                        }),
+                        _: 2
+                      }, 1024)) : b("", !0),
+                      (n(!0), i(k, null, v(e.headers, (a, B) => (n(), y(_, {
+                        key: B,
+                        "text-align": a.align,
+                        truncate: a.truncate,
+                        width: a.width,
+                        dense: e.dense,
+                        fixed: e.fixed
+                      }, {
+                        default: u(() => [
+                          d(e.$slots, `item-${a.value}`, { item: t }, () => [
+                            C(N(L(t, a.value)), 1)
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["text-align", "truncate", "width", "dense", "fixed"]))), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["pointer", "striped", "onClick"]),
+                  e.expandable ? (n(), i("tr", x, [
+                    f("td", ee, [
+                      f("div", {
+                        class: p(["overflow-hidden transition-opacity", [(s = g.value[o]) != null && s.__expanded ? "" : "opacity-0 max-h-0"]])
+                      }, [
+                        d(e.$slots, "expanded-row", { item: t })
+                      ], 2)
+                    ])
+                  ])) : b("", !0)
+                ], 64);
+              }), 128))
+            ]),
+            _: 3
+          }),
+          e.loading ? (n(), i("div", {
+            key: 0,
+            class: p(c(w).loadingWrapper)
+          }, [
+            m(K, { size: "lg" })
+          ], 2)) : b("", !0)
+        ], 6)
+      ], 2);
+    };
   }
 });
 export {
-  Z as default
+  fe as default
 };

package/lib/components/table/TableCell.vue.d.ts

@@ -1,4 +1,5 @@
-import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
     textAlign: readonly [null, "left", "center", "right", "justify"];
     verticalAlign: readonly [null, "baseline", "bottom", "middle", "text-bottom", "text-top", "top"];
@@ -10,7 +11,7 @@ declare const tableCellProps: {
     };
     truncate: BooleanConstructor;
     dense: BooleanConstructor;
-    fixed: BooleanConstructor;
+    width: (StringConstructor | NumberConstructor)[];
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null>;
         default: string;
@@ -20,6 +21,9 @@ declare const tableCellProps: {
 export type TableCellTextAlign = typeof validators.textAlign[number];
 export type TableCellVerticalAlign = typeof validators.verticalAlign[number];
 export type TableCellProps = ExtractPublicPropTypes<typeof tableCellProps>;
+type InternalClasses = 'wrapper';
+export interface TableCellTheme extends ThemeComponent<TableCellProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     textAlign: {
         type: PropType<"left" | "right" | "center" | "justify" | null>;
@@ -27,7 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     truncate: BooleanConstructor;
     dense: BooleanConstructor;
-    fixed: BooleanConstructor;
+    width: (StringConstructor | NumberConstructor)[];
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null>;
         default: string;
@@ -40,17 +44,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     truncate: BooleanConstructor;
     dense: BooleanConstructor;
-    fixed: BooleanConstructor;
+    width: (StringConstructor | NumberConstructor)[];
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null>;
         default: string;
         validator: (value: string) => boolean;
     };
 }>>, {
-    fixed: boolean;
     dense: boolean;
-    verticalAlign: "top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null;
     truncate: boolean;
+    verticalAlign: "top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top" | null;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/table/TableCell.vue.js

@@ -1,17 +1,16 @@
-import { defineComponent as i, openBlock as c, createElementBlock as p, normalizeStyle as d, unref as l, normalizeClass as m, renderSlot as u } from "vue";
-import { useTheme as f } from "../../composables/theme.js";
-import g from "./TableCell.theme.js";
+import { defineComponent as d, computed as c, openBlock as m, createElementBlock as u, normalizeStyle as p, unref as n, normalizeClass as f, renderSlot as h } from "vue";
+import { useTheme as g } from "../../composables/useTheme.js";
 const o = {
   textAlign: [null, "left", "center", "right", "justify"],
   verticalAlign: [null, "baseline", "bottom", "middle", "text-bottom", "text-top", "top"]
-}, x = {
+}, v = {
   textAlign: {
     type: String,
     validator: (e) => o.textAlign.includes(e)
   },
   truncate: Boolean,
   dense: Boolean,
-  fixed: Boolean,
+  width: [String, Number],
   verticalAlign: {
     type: String,
     default: "middle",
@@ -20,24 +19,23 @@ const o = {
 }, b = {
   name: "XTableCell",
   validators: o
-}, A = /* @__PURE__ */ i({
+}, w = /* @__PURE__ */ d({
   ...b,
-  props: x,
+  props: v,
   setup(e) {
-    const t = e;
-    t.truncate && !t.fixed && console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property');
-    const { styles: n, classes: r, className: a } = f("table-cell", g, t);
-    return (s, y) => (c(), p("td", {
-      style: d(l(n)),
-      class: m([
-        l(a),
-        l(r).wrapper
+    const t = e, l = c(() => typeof t.width == "number" ? `${t.width}px` : t.width), { styles: a, classes: i, className: r } = g("TableCell", {}, t);
+    return (s, x) => (m(), u("td", {
+      style: p([n(a), { width: l.value, minWidth: l.value, maxWidth: l.value }]),
+      class: f([
+        "relative",
+        n(r),
+        n(i).wrapper
       ])
     }, [
-      u(s.$slots, "default")
+      h(s.$slots, "default")
     ], 6));
   }
 });
 export {
-  A as default
+  w as default
 };

package/lib/components/table/TableHead.vue.d.ts

@@ -0,0 +1,16 @@
+import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const tableHeadProps: {};
+export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>;
+type InternalClasses = 'thead' | 'row';
+export interface TableHeadTheme extends ThemeComponent<TableHeadProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/table/TableHead.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as r, openBlock as n, createElementBlock as c, normalizeClass as s, unref as e, normalizeStyle as m, createElementVNode as d, renderSlot as _ } from "vue";
+import { useTheme as f } from "../../composables/useTheme.js";
+const p = { name: "XTableHead" }, T = /* @__PURE__ */ r({
+  ...p,
+  setup(u) {
+    const { styles: a, classes: t, className: l } = f("TableHead", {}, {});
+    return (o, i) => (n(), c("thead", {
+      class: s([e(l), e(t).thead]),
+      style: m(e(a))
+    }, [
+      d("tr", {
+        class: s(e(t).row)
+      }, [
+        _(o.$slots, "default")
+      ], 2)
+    ], 6));
+  }
+});
+export {
+  T as default
+};

package/lib/components/table/TableHead.vue2.js

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

package/lib/components/table/TableHeader.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
     sort: readonly [1, -1, undefined];
     textAlign: readonly ["left", "center", "right", "justify"];
@@ -19,6 +20,9 @@ declare const tableHeaderProps: {
 export type TableHeaderSort = typeof validators.sort[number];
 export type TableHeaderAlign = typeof validators.textAlign[number];
 export type TableHeaderProps = ExtractPublicPropTypes<typeof tableHeaderProps>;
+type InternalClasses = 'th' | 'sortIcon';
+export interface TableHeaderTheme extends ThemeComponent<TableHeaderProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     sort: {
         type: PropType<1 | -1 | undefined>;
@@ -44,9 +48,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     stickyHeader: BooleanConstructor;
 }>>, {
+    stickyHeader: boolean;
     textAlign: "left" | "right" | "center" | "justify";
     sortable: boolean;
-    stickyHeader: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/table/TableHeader.vue.js

@@ -1,78 +1,69 @@
-import { defineComponent as d, openBlock as t, createElementBlock as o, normalizeClass as u, renderSlot as i, Fragment as a, createCommentVNode as n, createElementVNode as s } from "vue";
-const c = {
-  key: 0,
-  class: "relative inline-block"
-}, p = {
-  key: 0,
-  class: "absolute stroke-2 w-3 h-3 ml-0.5 -right-3 top-0.5",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-linejoin": "round",
-  "stroke-linecap": "round",
-  fill: "none",
-  role: "presentation"
-}, y = /* @__PURE__ */ s("line", {
+import { defineComponent as m, openBlock as o, createElementBlock as l, normalizeStyle as h, unref as s, normalizeClass as a, renderSlot as y, Fragment as d, createCommentVNode as f, createElementVNode as n } from "vue";
+import { useTheme as _ } from "../../composables/useTheme.js";
+const g = /* @__PURE__ */ n("line", {
   x1: "12",
   y1: "5",
   x2: "12",
   y2: "19"
-}, null, -1), g = /* @__PURE__ */ s("polyline", { points: "19 12 12 19 5 12" }, null, -1), h = /* @__PURE__ */ s("line", {
+}, null, -1), k = /* @__PURE__ */ n("polyline", { points: "19 12 12 19 5 12" }, null, -1), v = /* @__PURE__ */ n("line", {
   x1: "12",
   y1: "19",
   x2: "12",
   y2: "5"
-}, null, -1), f = /* @__PURE__ */ s("polyline", { points: "5 12 12 5 19 12" }, null, -1), l = {
+}, null, -1), b = /* @__PURE__ */ n("polyline", { points: "5 12 12 5 19 12" }, null, -1), B = {
+  key: 2,
+  d: "m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"
+}, r = {
   sort: [1, -1, void 0],
   textAlign: ["left", "center", "right", "justify"]
-}, k = {
+}, x = {
   sort: {
     type: Number,
-    validator: (r) => l.sort.includes(r)
+    validator: (t) => r.sort.includes(t)
   },
   sortable: Boolean,
   textAlign: {
     type: String,
     default: "left",
-    validator: (r) => l.textAlign.includes(r)
+    validator: (t) => r.textAlign.includes(t)
   },
   stickyHeader: Boolean
-}, m = { name: "XTableHeader", validators: l }, b = /* @__PURE__ */ d({
-  ...m,
-  props: k,
-  setup(r) {
-    return (e, v) => (t(), o("th", {
-      class: u(["py-2 font-semibold tracking-widest uppercase text-xs px-3", [
-        {
-          // sort
-          "cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out": e.sortable,
-          // stickyHeader
-          "sticky top-0": e.stickyHeader,
-          // textAlign
-          "text-left": e.textAlign === "left",
-          "text-right": e.textAlign === "right",
-          "text-center": e.textAlign === "center",
-          "text-justify": e.textAlign === "justify"
-        }
-      ]])
+}, C = { name: "XTableHeader", validators: r }, S = /* @__PURE__ */ m({
+  ...C,
+  props: x,
+  setup(t) {
+    const c = t, { styles: u, classes: i, className: p } = _("TableHeader", {}, c);
+    return (e, H) => (o(), l("th", {
+      style: h(s(u)),
+      class: a([s(p), s(i).th, "group/th"])
     }, [
-      e.sortable ? (t(), o("div", c, [
-        i(e.$slots, "default"),
-        e.sort && [1, -1].includes(e.sort) ? (t(), o("svg", p, [
-          e.sort === -1 ? (t(), o(a, { key: 0 }, [
-            y,
-            g
-          ], 64)) : n("", !0),
-          e.sort === 1 ? (t(), o(a, { key: 1 }, [
-            h,
-            f
-          ], 64)) : n("", !0)
-        ])) : n("", !0)
-      ])) : i(e.$slots, "default", { key: 1 })
-    ], 2));
+      y(e.$slots, "default"),
+      e.sortable ? (o(), l("svg", {
+        key: 0,
+        class: a([
+          s(i).sortIcon,
+          [e.sort && [1, -1].includes(e.sort) ? "" : "invisible group-hover/th:visible"]
+        ]),
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "stroke-linejoin": "round",
+        "stroke-linecap": "round",
+        fill: "none",
+        role: "presentation"
+      }, [
+        e.sort === -1 ? (o(), l(d, { key: 0 }, [
+          g,
+          k
+        ], 64)) : e.sort === 1 ? (o(), l(d, { key: 1 }, [
+          v,
+          b
+        ], 64)) : (o(), l("path", B))
+      ], 2)) : f("", !0)
+    ], 6));
   }
 });
 export {
-  b as default
+  S as default
 };