@indielayer/ui 1.13.1 → 1.14.0

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

@@ -4,6 +4,7 @@ declare const tableRowProps: {
     pointer: BooleanConstructor;
     striped: BooleanConstructor;
     selected: BooleanConstructor;
+    singleSelect: BooleanConstructor;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
@@ -18,6 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     pointer: BooleanConstructor;
     striped: BooleanConstructor;
     selected: BooleanConstructor;
+    singleSelect: BooleanConstructor;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
@@ -27,6 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     pointer: BooleanConstructor;
     striped: BooleanConstructor;
     selected: BooleanConstructor;
+    singleSelect: BooleanConstructor;
     verticalAlign: {
         type: PropType<"top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top">;
         default: string;
@@ -36,6 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     selected: boolean;
     striped: boolean;
     pointer: boolean;
+    singleSelect: boolean;
     verticalAlign: "top" | "bottom" | "baseline" | "middle" | "text-bottom" | "text-top";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

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

@@ -6,6 +6,7 @@ const o = {
   pointer: Boolean,
   striped: Boolean,
   selected: Boolean,
+  singleSelect: Boolean,
   verticalAlign: {
     type: String,
     default: "top",
@@ -15,10 +16,10 @@ const o = {
   ...A,
   props: v,
   setup(t) {
-    const e = t, n = m(() => e.verticalAlign === "baseline" ? "align-baseline" : e.verticalAlign === "bottom" ? "align-bottom" : e.verticalAlign === "middle" ? "align-middle" : e.verticalAlign === "text-bottom" ? "align-text-bottom" : e.verticalAlign === "text-top" ? "align-text-top" : e.verticalAlign === "top" ? "align-top" : ""), { styles: i, classes: r, className: a } = b("TableRow", {}, e);
+    const e = t, n = m(() => e.verticalAlign === "baseline" ? "align-baseline" : e.verticalAlign === "bottom" ? "align-bottom" : e.verticalAlign === "middle" ? "align-middle" : e.verticalAlign === "text-bottom" ? "align-text-bottom" : e.verticalAlign === "text-top" ? "align-text-top" : e.verticalAlign === "top" ? "align-top" : ""), { styles: i, classes: a, className: r } = b("TableRow", {}, e);
     return (s, x) => (p(), u("tr", {
       style: d(l(i)),
-      class: g([l(a), l(r).row, n.value])
+      class: g([l(r), l(a).row, n.value])
     }, [
       f(s.$slots, "default")
     ], 6));

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -2,7 +2,11 @@ const s = {
   classes: {
     th: ({ props: e }) => {
       const t = ["relative p-2.5 font-medium"];
-      return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
+      return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), t;
+    },
+    header: ({ props: e }) => {
+      const t = ["flex items-center gap-1 select-none"];
+      return e.textAlign === "left" && t.push("justify-start"), e.textAlign === "right" && t.push("justify-end"), e.textAlign === "center" && t.push("justify-center"), e.textAlign === "justify" && t.push("justify-center"), t;
     },
     sortIcon: ({ props: e }) => ["stroke-2 w-3 h-3"]
   }

package/lib/components/table/theme/TableRow.base.theme.js

@@ -2,10 +2,10 @@ const s = {
   classes: {
     row: ({ props: r }) => {
       const e = [];
-      return r.selected && e.push("shadow-[inset_2px_0] shadow-primary-500"), r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
+      return r.selected && r.singleSelect && e.push("shadow-[inset_2px_0] shadow-primary-500 !bg-secondary-50 dark:!bg-secondary-600"), r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
     }
   }
-}, o = s;
+}, d = s;
 export {
-  o as default
+  d as default
 };

package/lib/composables/useFocusTrap.d.ts

@@ -1,6 +1,11 @@
-import type { ComponentPublicInstance } from 'vue';
-import { type MaybeRef } from 'vue';
+import { type Ref, type ComponentPublicInstance } from 'vue';
 export declare function useFocusTrap(): {
-    initFocusTrap: (targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) => Promise<void>;
-    clearFocusTrap: () => void;
+    initFocusTrap: (targetRef: Ref<HTMLElement | ComponentPublicInstance | null> | HTMLElement | ComponentPublicInstance | null, options?: {
+        initialFocusIndex?: number;
+        returnFocusOnClear?: boolean;
+    }) => Promise<void>;
+    clearFocusTrap: (options?: {
+        returnFocus?: boolean;
+    }) => void;
+    focusable: Ref<HTMLElement[], HTMLElement[]>;
 };

package/lib/composables/useFocusTrap.js

@@ -1,37 +1,52 @@
-import { onUnmounted as m, unref as y, nextTick as p } from "vue";
-const f = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
-function x() {
-  let n = [], u = null, t = null;
-  async function a(e) {
-    e = y(e), e && (await p(), i(e), t && t.focus(), document.addEventListener("keydown", r), u = new MutationObserver(() => i(e)), e.$el ? u.observe(e.$el, { childList: !0, subtree: !0 }) : u.observe(e, { childList: !0, subtree: !0 }));
+import { ref as F, onUnmounted as h, unref as w, nextTick as x, watch as E } from "vue";
+const T = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
+function p() {
+  const l = F([]);
+  let r = null, a = null, f = null, s = null, o = null;
+  function d(e) {
+    return e ? e.$el ? e.$el : e : null;
   }
-  function i(e) {
-    if (e === null)
+  function m(e) {
+    const n = d(e);
+    if (!n)
       return;
-    let l;
-    e.$el ? l = e == null ? void 0 : e.$el.querySelectorAll(f) : e.querySelectorAll(f), n = Array.from(l || []), t = n[0] || null, n[n.length - 1];
+    const t = n.querySelectorAll(T);
+    l.value = Array.from(t), a = l.value[0] || null, f = l.value[l.value.length - 1] || null;
   }
-  const r = (e) => {
-    var l;
-    if (e.key === "Tab") {
-      const b = e.shiftKey, c = document.activeElement;
-      if (!c) {
-        e.preventDefault(), (l = n[0]) == null || l.focus();
-        return;
-      }
-      const o = n[0], s = n[n.length - 1];
-      !b && c === s ? (e.preventDefault(), o == null || o.focus()) : b && c === o && (e.preventDefault(), s == null || s.focus());
+  const v = (e) => {
+    if (e.key !== "Tab" || l.value.length === 0)
+      return;
+    const n = e.shiftKey, t = document.activeElement, u = a, c = f;
+    if (!t) {
+      e.preventDefault(), u == null || u.focus();
+      return;
     }
-  }, d = () => {
-    document.removeEventListener("keydown", r), u == null || u.disconnect();
+    !n && t === c ? (e.preventDefault(), u == null || u.focus()) : n && t === u && (e.preventDefault(), c == null || c.focus());
   };
-  return m(() => {
-    d();
+  async function b(e, n) {
+    var c;
+    if (typeof window > "u" || (i(), s = document.activeElement, o = w(e), !o))
+      return;
+    await x(), m(o);
+    const t = (n == null ? void 0 : n.initialFocusIndex) ?? 0;
+    (c = l.value[t]) == null || c.focus(), document.addEventListener("keydown", v), r = new MutationObserver(() => m(o));
+    const u = d(o);
+    u && r.observe(u, { childList: !0, subtree: !0 }), typeof e == "object" && e !== null && "value" in e && E(e, (y) => {
+      i(), y !== null && b(e, n);
+    });
+  }
+  function i(e) {
+    document.removeEventListener("keydown", v), r == null || r.disconnect(), r = null, e != null && e.returnFocus && s && s.focus(), o = null;
+  }
+  return h(() => {
+    i({ returnFocus: !0 });
   }), {
-    initFocusTrap: a,
-    clearFocusTrap: d
+    initFocusTrap: b,
+    clearFocusTrap: i,
+    focusable: l
+    // expose for advanced use
   };
 }
 export {
-  x as useFocusTrap
+  p as useFocusTrap
 };