@orchidui/dashboard 1.8.1-95 → 1.8.1-96

package/dist/ui/tabs/index.js

@@ -0,0 +1,280 @@
+import { defineComponent as f, toRefs as B, ref as M, createBlock as m, openBlock as v, unref as e, withCtx as u, renderSlot as b, computed as g, onMounted as I, createVNode as _, normalizeStyle as R, createCommentVNode as k, withKeys as F, withModifiers as O, normalizeProps as S, guardReactiveProps as j, mergeProps as C, createElementVNode as L } from "vue";
+import { u as A, a as D } from "../../useForwardPropsEmits-0XKBv1pB.js";
+import { u as E } from "../../index-BwPb_idr.js";
+import { c as H } from "../../createContext-CZEfaSVa.js";
+import { u as z } from "../../useDirection-C3C_TLKm.js";
+import { u as h } from "../../useForwardExpose-DZT6mL_U.js";
+import { u as K } from "../../useId-reAg216X.js";
+import { P as y } from "../../Primitive-B3twiLO1.js";
+import { c as V } from "../../utils-SFgRDk1R.js";
+import { P as N } from "../../Presence-CxfTrw6l.js";
+import { r as $ } from "../../index-OpE2oGce.js";
+import { _ as q } from "../../RovingFocusGroup-0OHdFQl0.js";
+import { _ as G } from "../../RovingFocusItem-s7Ug6oxb.js";
+function w(o, a) {
+  return `${o}-trigger-${a}`;
+}
+function P(o, a) {
+  return `${o}-content-${a}`;
+}
+const [T, J] = H("TabsRoot"), Q = /* @__PURE__ */ f({
+  __name: "TabsRoot",
+  props: {
+    defaultValue: {},
+    orientation: { default: "horizontal" },
+    dir: {},
+    activationMode: { default: "automatic" },
+    modelValue: {},
+    unmountOnHide: { type: Boolean, default: !0 },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const n = o, t = a, { orientation: l, unmountOnHide: d, dir: i } = B(n), s = z(i);
+    h();
+    const r = E(n, "modelValue", t, {
+      defaultValue: n.defaultValue,
+      passive: n.modelValue === void 0
+    }), c = M();
+    return J({
+      modelValue: r,
+      changeModelValue: (p) => {
+        r.value = p;
+      },
+      orientation: l,
+      dir: s,
+      unmountOnHide: d,
+      activationMode: n.activationMode,
+      baseId: K(void 0, "reka-tabs"),
+      tabsList: c
+    }), (p, Z) => (v(), m(e(y), {
+      dir: e(s),
+      "data-orientation": e(l),
+      "as-child": p.asChild,
+      as: p.as
+    }, {
+      default: u(() => [
+        b(p.$slots, "default", { modelValue: e(r) })
+      ]),
+      _: 3
+    }, 8, ["dir", "data-orientation", "as-child", "as"]));
+  }
+}), U = /* @__PURE__ */ f({
+  __name: "TabsContent",
+  props: {
+    value: {},
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(o) {
+    const a = o, { forwardRef: n } = h(), t = T(), l = g(() => w(t.baseId, a.value)), d = g(() => P(t.baseId, a.value)), i = g(() => a.value === t.modelValue.value), s = M(i.value);
+    return I(() => {
+      requestAnimationFrame(() => {
+        s.value = !1;
+      });
+    }), (r, c) => (v(), m(e(N), {
+      present: r.forceMount || i.value,
+      "force-mount": ""
+    }, {
+      default: u(({ present: p }) => [
+        _(e(y), {
+          id: d.value,
+          ref: e(n),
+          "as-child": r.asChild,
+          as: r.as,
+          role: "tabpanel",
+          "data-state": i.value ? "active" : "inactive",
+          "data-orientation": e(t).orientation.value,
+          "aria-labelledby": l.value,
+          hidden: !p,
+          tabindex: "0",
+          style: R({
+            animationDuration: s.value ? "0s" : void 0
+          })
+        }, {
+          default: u(() => [
+            !e(t).unmountOnHide.value || p ? b(r.$slots, "default", { key: 0 }) : k("", !0)
+          ]),
+          _: 2
+        }, 1032, ["id", "as-child", "as", "data-state", "data-orientation", "aria-labelledby", "hidden", "style"])
+      ]),
+      _: 3
+    }, 8, ["present"]));
+  }
+}), W = /* @__PURE__ */ f({
+  __name: "TabsList",
+  props: {
+    loop: { type: Boolean, default: !0 },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(o) {
+    const a = o, { loop: n } = B(a), { forwardRef: t, currentElement: l } = h(), d = T();
+    return d.tabsList = l, (i, s) => (v(), m(e(q), {
+      "as-child": "",
+      orientation: e(d).orientation.value,
+      dir: e(d).dir.value,
+      loop: e(n)
+    }, {
+      default: u(() => [
+        _(e(y), {
+          ref: e(t),
+          role: "tablist",
+          "as-child": i.asChild,
+          as: i.as,
+          "aria-orientation": e(d).orientation.value
+        }, {
+          default: u(() => [
+            b(i.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["as-child", "as", "aria-orientation"])
+      ]),
+      _: 3
+    }, 8, ["orientation", "dir", "loop"]));
+  }
+}), X = /* @__PURE__ */ f({
+  __name: "TabsTrigger",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: !1 },
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  setup(o) {
+    const a = o, { forwardRef: n } = h(), t = T(), l = g(() => w(t.baseId, a.value)), d = g(() => P(t.baseId, a.value)), i = g(() => a.value === t.modelValue.value);
+    return (s, r) => (v(), m(e(G), {
+      "as-child": "",
+      focusable: !s.disabled,
+      active: i.value
+    }, {
+      default: u(() => [
+        _(e(y), {
+          id: l.value,
+          ref: e(n),
+          role: "tab",
+          type: s.as === "button" ? "button" : void 0,
+          as: s.as,
+          "as-child": s.asChild,
+          "aria-selected": i.value ? "true" : "false",
+          "aria-controls": d.value,
+          "data-state": i.value ? "active" : "inactive",
+          disabled: s.disabled,
+          "data-disabled": s.disabled ? "" : void 0,
+          "data-orientation": e(t).orientation.value,
+          onMousedown: r[0] || (r[0] = O((c) => {
+            !s.disabled && c.ctrlKey === !1 ? e(t).changeModelValue(s.value) : c.preventDefault();
+          }, ["left"])),
+          onKeydown: r[1] || (r[1] = F((c) => e(t).changeModelValue(s.value), ["enter", "space"])),
+          onFocus: r[2] || (r[2] = () => {
+            const c = e(t).activationMode !== "manual";
+            !i.value && !s.disabled && c && e(t).changeModelValue(s.value);
+          })
+        }, {
+          default: u(() => [
+            b(s.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["id", "type", "as", "as-child", "aria-selected", "aria-controls", "data-state", "disabled", "data-disabled", "data-orientation"])
+      ]),
+      _: 3
+    }, 8, ["focusable", "active"]));
+  }
+}), pe = /* @__PURE__ */ f({
+  __name: "Tabs",
+  props: {
+    defaultValue: {},
+    orientation: {},
+    dir: {},
+    activationMode: {},
+    modelValue: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const l = A(o, a);
+    return (d, i) => (v(), m(e(Q), S(j(e(l))), {
+      default: u(() => [
+        b(d.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), fe = /* @__PURE__ */ f({
+  __name: "TabsContent",
+  props: {
+    value: {},
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(o) {
+    const a = o, n = $(a, "class");
+    return (t, l) => (v(), m(e(U), C({
+      class: e(V)("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", a.class)
+    }, e(n)), {
+      default: u(() => [
+        b(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), me = /* @__PURE__ */ f({
+  __name: "TabsList",
+  props: {
+    loop: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(o) {
+    const a = o, n = $(a, "class");
+    return (t, l) => (v(), m(e(W), C(e(n), {
+      class: e(V)(
+        "inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        a.class
+      )
+    }), {
+      default: u(() => [
+        b(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), Y = { class: "truncate" }, ve = /* @__PURE__ */ f({
+  __name: "TabsTrigger",
+  props: {
+    value: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(o) {
+    const a = o, n = $(a, "class"), t = D(n);
+    return (l, d) => (v(), m(e(X), C(e(t), {
+      class: e(V)(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        a.class
+      )
+    }), {
+      default: u(() => [
+        L("span", Y, [
+          b(l.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  pe as Tabs,
+  fe as TabsContent,
+  me as TabsList,
+  ve as TabsTrigger
+};