@robuust-digital/vue-components 1.3.1 → 2.0.0-rc.0

package/dist/core/index.js

@@ -0,0 +1,779 @@
+import { createElementBlock as l, openBlock as t, createElementVNode as o, Fragment as k, renderList as S, renderSlot as v, createTextVNode as A, toDisplayString as m, createVNode as V, unref as h, normalizeClass as p, createBlock as x, resolveDynamicComponent as B, withCtx as L, createCommentVNode as $, computed as C, useAttrs as F, withDirectives as M, mergeProps as b, vModelDynamic as N, normalizeProps as P, guardReactiveProps as H, vModelSelect as E, ref as q, vModelText as R } from "vue";
+import { r as U } from "../_shared/XMarkIcon-90mcPzBs.js";
+import { r as Z } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
+import { _ as Ze } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
+import { _ as Ge } from "../_shared/ButtonBase-CQjlJ85F.js";
+import { u as j } from "../_shared/FormInput-abFMz_J4.js";
+import { _ as Qe } from "../_shared/FormInput-abFMz_J4.js";
+import { S as K } from "../_shared/icon-spinner-CmxIOqaK.js";
+function G(e, r) {
+  return t(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "fill-rule": "evenodd",
+      d: "M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function J(e, r) {
+  return t(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "fill-rule": "evenodd",
+      d: "M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], Ie = {
+  __name: "Accordion",
+  props: {
+    items: {
+      type: Array,
+      required: !0,
+      default: () => []
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    defaultOpenIndex: {
+      type: Number,
+      default: 0
+    },
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return (r, i) => (t(), l("div", Q, [
+      (t(!0), l(k, null, S(e.items, (c, s) => (t(), l("details", {
+        key: s,
+        open: e.defaultOpenIndex === s,
+        name: e.name,
+        class: "group/accordion"
+      }, [
+        o("summary", null, [
+          v(r.$slots, "summary", {
+            item: c,
+            active: e.defaultOpenIndex === s
+          }, () => [
+            A(m(c.title) + " ", 1),
+            v(r.$slots, "icon", { classList: "size-5 group-open/accordion:rotate-45 transition-transform" }, () => [
+              V(h(J), { class: "size-5 group-open/accordion:rotate-45 transition-transform" })
+            ])
+          ])
+        ]),
+        o("div", {
+          class: p(["rvc-accordion-content", e.contentClass])
+        }, [
+          v(r.$slots, "content", { item: c }, () => [
+            o("div", {
+              innerHTML: c.content
+            }, null, 8, X)
+          ])
+        ], 2)
+      ], 8, W))), 128))
+    ]));
+  }
+}, Y = { class: "rvc-alert-title" }, ze = {
+  __name: "Alert",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    type: {
+      type: String,
+      default: "info",
+      validator: (e) => ["success", "warning", "danger", "info"].includes(e)
+    },
+    close: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["alert:close"],
+  setup(e) {
+    return (r, i) => (t(), x(B(e.as), {
+      class: p(["rvc-alert", `rvc-alert-${e.type}`])
+    }, {
+      default: L(() => [
+        v(r.$slots, "icon", {}, () => [
+          e.icon ? (t(), x(B(e.icon), {
+            key: 0,
+            class: "rvc-alert-icon"
+          })) : $("", !0)
+        ]),
+        o("div", null, [
+          v(r.$slots, "title", {}, () => [
+            o("span", Y, m(e.title), 1)
+          ]),
+          v(r.$slots, "default")
+        ]),
+        v(r.$slots, "close", {}, () => [
+          e.close ? (t(), l("button", {
+            key: 0,
+            type: "button",
+            class: "rvc-alert-close transition-colors",
+            onClick: i[0] || (i[0] = (c) => r.$emit("alert:close"))
+          }, [
+            V(h(U), { class: "size-5" })
+          ])) : $("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}, _ = { class: "rvc-checkbox-input peer-focus/checkbox:rvc-focus" }, ee = ["for"], Fe = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Checkbox",
+  props: {
+    modelValue: {
+      type: [Boolean, String, Array, Number],
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = C({
+      get: () => i.modelValue,
+      set: (a) => c("update:modelValue", a)
+    }), { hasModelBinding: g } = j(), u = {
+      ...F(),
+      id: i.id,
+      type: "checkbox",
+      class: "absolute opacity-0 inset-0 cursor-pointer peer/checkbox"
+    };
+    return (a, n) => (t(), l("div", {
+      class: p(["rvc-checkbox", e.rootClass])
+    }, [
+      h(g) ? M((t(), l("input", b({ key: 0 }, u, {
+        "onUpdate:modelValue": n[0] || (n[0] = (d) => s.value = d)
+      }), null, 16)), [
+        [N, s.value]
+      ]) : (t(), l("input", P(b({ key: 1 }, u)), null, 16)),
+      o("span", _, [
+        V(h(G))
+      ]),
+      o("div", null, [
+        a.$slots.default || e.label ? v(a.$slots, "default", { key: 0 }, () => [
+          o("label", { for: e.id }, m(e.label), 9, ee)
+        ]) : $("", !0)
+      ])
+    ], 2));
+  }
+});
+function te(e, r) {
+  return t(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "fill-rule": "evenodd",
+      d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function ae(e, r) {
+  return t(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "fill-rule": "evenodd",
+      d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function ne(e, r) {
+  return t(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "fill-rule": "evenodd",
+      d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+const D = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "FormSelect",
+  props: {
+    modelValue: {
+      type: [String, Number, Object],
+      default: null
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    },
+    prefixIcon: {
+      type: [Object, Function],
+      default: null
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = C({
+      get: () => i.modelValue,
+      set: (f) => c("update:modelValue", f)
+    }), { hasModelBinding: g } = j();
+    return (f, u) => (t(), l("div", {
+      class: p([
+        "rvc-select",
+        `rvc-select-${e.size}`,
+        e.rootClass
+      ])
+    }, [
+      e.prefixIcon ? v(f.$slots, "prefixIcon", {
+        key: 0,
+        icon: e.prefixIcon
+      }, () => [
+        (t(), x(B(e.prefixIcon), { "aria-hidden": "true" }))
+      ]) : $("", !0),
+      v(f.$slots, "select", P(H(f.$attrs)), () => [
+        h(g) ? M((t(), l("select", b({ key: 0 }, f.$attrs, {
+          "onUpdate:modelValue": u[0] || (u[0] = (a) => s.value = a)
+        }), [
+          v(f.$slots, "default")
+        ], 16)), [
+          [E, s.value]
+        ]) : (t(), l("select", P(b({ key: 1 }, f.$attrs)), [
+          v(f.$slots, "default")
+        ], 16))
+      ]),
+      v(f.$slots, "icon", { icon: e.icon }, () => [
+        (t(), x(B(e.icon ?? h(Z)), { "aria-hidden": "true" }))
+      ])
+    ], 2));
+  }
+}), le = {
+  key: 0,
+  class: "rvc-pagination grid grid-cols-2 md:grid-cols-3 items-center justify-between"
+}, se = ["value"], ie = { class: "md:flex justify-center hidden" }, oe = { class: "rvc-pagination-info" }, re = { class: "flex justify-end" }, ue = { class: "flex items-center md:gap-0.5 xl:gap-1" }, ce = ["disabled", "onClick"], de = { key: 2 }, ge = { key: 3 }, fe = {
+  __name: "Pagination",
+  props: {
+    pagination: {
+      type: Object,
+      required: !0
+    },
+    perPage: {
+      type: Number,
+      default: 10
+    },
+    perPageLabel: {
+      type: String,
+      default: "per page"
+    },
+    perPageOptions: {
+      type: Array,
+      default: () => [10, 20, 50]
+    },
+    fromLabel: {
+      type: String,
+      default: "of"
+    }
+  },
+  emits: ["pagination:change", "pagination:perPage"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = q(i.perPage);
+    return (g, f) => {
+      var u;
+      return (u = e.pagination) != null && u.total ? (t(), l("div", le, [
+        v(g.$slots, "perPage", b(e.pagination, { perPage: s.value }), () => [
+          V(D, {
+            modelValue: s.value,
+            "onUpdate:modelValue": [
+              f[0] || (f[0] = (a) => s.value = a),
+              f[1] || (f[1] = (a) => c("pagination:perPage", a))
+            ],
+            size: "sm",
+            "root-class": "w-fit"
+          }, {
+            default: L(() => [
+              (t(!0), l(k, null, S(e.perPageOptions, (a) => (t(), l("option", {
+                key: `pagination-items-per-page-option-${a}`,
+                value: a
+              }, m(a) + " " + m(e.perPageLabel), 9, se))), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        v(g.$slots, "info", b(e.pagination, { fromLabel: e.fromLabel }), () => [
+          o("div", ie, [
+            o("div", oe, m(e.pagination.from) + " - " + m(e.pagination.to) + " " + m(e.fromLabel) + " " + m(e.pagination.total), 1)
+          ])
+        ]),
+        o("div", re, [
+          o("nav", null, [
+            o("ol", ue, [
+              (t(!0), l(k, null, S(e.pagination.links, (a, n) => (t(), l("li", {
+                key: `pagination-link-${a.label}-${n}`,
+                class: "hidden md:block first:block last:block"
+              }, [
+                o("button", {
+                  type: "button",
+                  disabled: a.label === "..." || !a.url,
+                  class: p([
+                    "rvc-pagination-button",
+                    { "rvc-pagination-button-active": a.active }
+                  ]),
+                  onClick: (d) => a.url && c("pagination:change", a.url)
+                }, [
+                  a.url !== "..." && n === 0 ? (t(), x(h(ae), {
+                    key: 0,
+                    "aria-hidden": "true",
+                    class: p([
+                      "size-5 text-slate-80",
+                      { "opacity-50": !a.url }
+                    ])
+                  }, null, 8, ["class"])) : a.label !== "..." && n === e.pagination.links.length - 1 ? (t(), x(h(ne), {
+                    key: 1,
+                    "aria-hidden": "true",
+                    class: p([
+                      "size-5 text-slate-80",
+                      { "opacity-50": !a.url }
+                    ])
+                  }, null, 8, ["class"])) : a.label === "..." ? (t(), l("span", de, " ... ")) : (t(), l("span", ge, m(a.label), 1))
+                ], 10, ce)
+              ]))), 128))
+            ])
+          ])
+        ])
+      ])) : $("", !0);
+    };
+  }
+}, ve = { key: 0 }, me = ["aria-label", "onClick"], pe = ["innerHTML"], ye = { key: 1 }, be = ["colspan"], he = { key: 2 }, $e = ["colspan"], ke = { class: "flex gap-x-2 items-center" }, Ne = {
+  __name: "DataTable",
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+      validator: (e) => e.every((i) => {
+        const c = !i.align || ["left", "center", "right"].includes(i.align), g = !(i.sortable === !0) || typeof i.key == "string" && i.key.length > 0;
+        return g || console.warn("[DataTable] Header item with sortable=true is missing required 'key' property:", i), !c && i.align && console.warn("[DataTable] Header item has invalid 'align' value. Must be 'left', 'center' or 'right':", i), c && g;
+      })
+    },
+    items: {
+      type: Array,
+      required: !0
+    },
+    noResultsText: {
+      type: String,
+      default: "No results found."
+    },
+    loadingText: {
+      type: String,
+      default: "Loading content..."
+    },
+    striped: {
+      type: Boolean
+    },
+    spinning: {
+      type: Boolean
+    },
+    pagination: {
+      type: Object,
+      default: null
+    },
+    wrapperClass: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["table:sortBy", "pagination:change", "pagination:perPage"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = q(null), g = (u) => i.headers.find((a) => a.key === u), f = (u) => {
+      !s.value || s.value.key !== u.key ? s.value = {
+        key: u.key,
+        direction: "asc"
+      } : s.value.direction === "asc" ? s.value = {
+        key: u.key,
+        direction: "desc"
+      } : s.value = null, c("table:sortBy", s.value);
+    };
+    return (u, a) => (t(), l("div", null, [
+      o("div", {
+        class: p(["rvc-table-wrapper", e.wrapperClass])
+      }, [
+        o("table", {
+          class: p([{ "rvc-table-striped": e.striped }, "w-full rvc-table"])
+        }, [
+          e.headers.length ? (t(), l("thead", ve, [
+            o("tr", null, [
+              v(u.$slots, "headers", { headers: e.headers }, () => [
+                (t(!0), l(k, null, S(e.headers, (n) => {
+                  var d, y;
+                  return t(), l("th", b({ ref_for: !0 }, n, {
+                    key: `rvc-table-header-${n.id}`,
+                    class: {
+                      "text-left": n.align === "left" || !n.align,
+                      "text-center": n.align === "center",
+                      "text-right": n.align === "right"
+                    }
+                  }), [
+                    n.sortable && n.key ? (t(), l("button", {
+                      key: 0,
+                      type: "button",
+                      "aria-label": `Sort on ${n.label}`,
+                      class: p([
+                        "flex w-full gap-x-1.5 hover:underline group/table",
+                        {
+                          "justify-center": n.align === "center",
+                          "justify-start flex-row-reverse": n.align === "right"
+                        }
+                      ]),
+                      onClick: (w) => f(n)
+                    }, [
+                      v(u.$slots, "header-label", {
+                        sortBy: s.value,
+                        header: n
+                      }, () => [
+                        A(m(n.label), 1)
+                      ]),
+                      V(h(te), {
+                        class: p([
+                          "size-4 shrink-0 transition",
+                          {
+                            "opacity-100": ((d = s.value) == null ? void 0 : d.key) === n.key,
+                            "opacity-0 group-hover/table:opacity-30": !s.value || s.value.key !== n.key,
+                            "rotate-180": ((y = s.value) == null ? void 0 : y.key) === n.key && s.value.direction === "desc"
+                          }
+                        ])
+                      }, null, 8, ["class"])
+                    ], 10, me)) : v(u.$slots, "header-label", {
+                      key: 1,
+                      sortBy: s.value,
+                      header: n
+                    }, () => [
+                      A(m(n.label), 1)
+                    ])
+                  ], 16);
+                }), 128))
+              ])
+            ])
+          ])) : $("", !0),
+          o("tbody", null, [
+            e.items.length && !e.spinning ? (t(!0), l(k, { key: 0 }, S(e.items, (n, d) => (t(), l("tr", {
+              key: `rvc-table-row-${d}-${n.id}`
+            }, [
+              v(u.$slots, "items", {
+                item: n,
+                index: d
+              }, () => [
+                (t(!0), l(k, null, S(n, (y, w) => {
+                  var O, T, I, z;
+                  return t(), l("td", b({
+                    key: `rvc-table-row-${d}-column-${w}-${n.id}`,
+                    ref_for: !0
+                  }, n.attrs, {
+                    class: {
+                      "text-left": ((O = g(w)) == null ? void 0 : O.align) === "left" || !((T = g(w)) != null && T.align),
+                      "text-center": ((I = g(w)) == null ? void 0 : I.align) === "center",
+                      "text-right": ((z = g(w)) == null ? void 0 : z.align) === "right"
+                    },
+                    innerHTML: y
+                  }), null, 16, pe);
+                }), 128))
+              ])
+            ]))), 128)) : !e.items.length && !e.spinning ? (t(), l("tr", ye, [
+              o("td", {
+                colspan: e.headers.length,
+                class: "rvc-table-state"
+              }, [
+                o("p", null, m(e.noResultsText), 1)
+              ], 8, be)
+            ])) : (t(), l("tr", he, [
+              o("td", {
+                colspan: e.headers.length,
+                class: "rvc-table-state"
+              }, [
+                v(u.$slots, "spinner", {
+                  spinning: e.spinning,
+                  label: e.loadingText
+                }, () => [
+                  o("div", ke, [
+                    e.spinning ? (t(), x(h(K), {
+                      key: 0,
+                      "aria-hidden": "true",
+                      class: "rvc-table-spinner"
+                    })) : $("", !0),
+                    A(" " + m(e.loadingText), 1)
+                  ])
+                ])
+              ], 8, $e)
+            ]))
+          ])
+        ], 2)
+      ], 2),
+      e.pagination ? v(u.$slots, "pagination", P(b({ key: 0 }, e.pagination)), () => [
+        V(fe, {
+          pagination: e.pagination,
+          "onPagination:change": a[0] || (a[0] = (n) => c("pagination:change", n)),
+          "onPagination:perPage": a[1] || (a[1] = (n) => c("pagination:perPage", n))
+        }, null, 8, ["pagination"])
+      ]) : $("", !0)
+    ]));
+  }
+}, xe = {
+  key: 1,
+  class: "rvc-empty-state-title"
+}, qe = {
+  __name: "EmptyState",
+  props: {
+    title: {
+      type: String,
+      required: !0,
+      default: ""
+    },
+    background: {
+      type: Boolean,
+      default: !1
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    }
+  },
+  setup(e) {
+    return (r, i) => (t(), l("div", {
+      class: p(["rvc-empty-state", { "rvc-empty-state-bg": e.background }])
+    }, [
+      e.icon ? (t(), x(B(e.icon), {
+        key: 0,
+        class: "rvc-empty-state-icon"
+      })) : $("", !0),
+      e.title ? (t(), l("p", xe, m(e.title), 1)) : $("", !0),
+      v(r.$slots, "default")
+    ], 2));
+  }
+}, De = {
+  __name: "FormTextarea",
+  props: {
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, { hasModelBinding: s } = j(), g = C({
+      get: () => i.modelValue,
+      set: (u) => c("update:modelValue", u)
+    }), f = C(() => [
+      "rvc-textarea",
+      `rvc-textarea-${i.size}`
+    ]);
+    return (u, a) => h(s) ? M((t(), l("textarea", {
+      key: 0,
+      "onUpdate:modelValue": a[0] || (a[0] = (n) => g.value = n),
+      class: p(f.value)
+    }, null, 2)), [
+      [R, g.value]
+    ]) : (t(), l("textarea", {
+      key: 1,
+      class: p(f.value)
+    }, null, 2));
+  }
+}, we = { class: "rvc-radio" }, Se = ["id"], Ve = { key: 2 }, Be = ["for"], He = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Radio",
+  props: {
+    modelValue: {
+      type: [Boolean, String, Array, Number],
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = C({
+      get: () => i.modelValue,
+      set: (a) => c("update:modelValue", a)
+    }), { hasModelBinding: g } = j(), u = {
+      ...F(),
+      id: i.id,
+      type: "radio",
+      class: "absolute opacity-0 inset-0 cursor-pointer peer/radio"
+    };
+    return (a, n) => (t(), l("div", we, [
+      h(g) ? M((t(), l("input", b({ key: 0 }, u, {
+        id: e.id,
+        "onUpdate:modelValue": n[0] || (n[0] = (d) => s.value = d)
+      }), null, 16, Se)), [
+        [N, s.value]
+      ]) : (t(), l("input", P(b({ key: 1 }, u)), null, 16)),
+      n[1] || (n[1] = o("span", { class: "rvc-radio-input peer-focus/radio:rvc-focus" }, null, -1)),
+      a.$slots.default || e.label ? (t(), l("span", Ve, [
+        v(a.$slots, "default", {}, () => [
+          o("label", { for: e.id }, m(e.label), 9, Be)
+        ])
+      ])) : $("", !0)
+    ]));
+  }
+}), Ce = { class: "rvc-tabs-nav" }, Ae = { class: "md:hidden" }, Pe = ["value", "selected"], Ee = {
+  __name: "Tabs",
+  props: {
+    modelValue: {
+      type: Number,
+      default: void 0
+    },
+    tabs: {
+      type: Array,
+      required: !0,
+      default: () => []
+    },
+    tabStyle: {
+      type: String,
+      default: "default",
+      validator: (e) => ["buttons", "default"].includes(e)
+    }
+  },
+  emits: ["update:modelValue", "tabs:change"],
+  setup(e, { emit: r }) {
+    const i = e, c = r, s = () => {
+      const a = i.tabs.findIndex((n) => n.active);
+      return a >= 0 ? a : 0;
+    }, g = C({
+      get: () => i.modelValue ?? s(),
+      set: (a) => {
+        const n = i.tabs[a];
+        c("update:modelValue", a), c("tabs:change", n);
+      }
+    }), f = (a) => {
+      const n = +a.target.value;
+      g.value = n;
+      const d = i.tabs[n];
+      d != null && d.selectEvent && d.selectEvent();
+    }, u = (a) => {
+      const {
+        active: n,
+        as: d,
+        bindAs: y,
+        selectEvent: w,
+        name: O,
+        ...T
+      } = a;
+      return T;
+    };
+    return (a, n) => (t(), l(k, null, [
+      o("div", {
+        class: p(["rvc-tabs hidden md:flex", { "rvc-tabs-buttons": e.tabStyle === "buttons" }])
+      }, [
+        o("nav", Ce, [
+          (t(!0), l(k, null, S(e.tabs, (d, y) => (t(), x(B(d.as ? d.as : "button"), b({ ref_for: !0 }, u(d), {
+            key: `${y}-tab-item`,
+            as: d.bindAs ? d.bindAs : void 0,
+            class: ["rvc-tab", { "rvc-tab-active": g.value === y }],
+            onClick: (w) => g.value = y
+          }), {
+            default: L(() => [
+              A(m(d.name), 1)
+            ]),
+            _: 2
+          }, 1040, ["as", "class", "onClick"]))), 128))
+        ])
+      ], 2),
+      o("div", Ae, [
+        V(D, {
+          value: g.value,
+          onChange: f
+        }, {
+          default: L(() => [
+            (t(!0), l(k, null, S(e.tabs, (d, y) => (t(), l("option", {
+              key: `${y}-tab-item-select-option`,
+              value: y,
+              selected: g.value === y
+            }, m(d.name), 9, Pe))), 128))
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ])
+    ], 64));
+  }
+};
+export {
+  Ie as Accordion,
+  ze as Alert,
+  Ze as Badge,
+  Ge as ButtonBase,
+  Fe as Checkbox,
+  Ne as DataTable,
+  qe as EmptyState,
+  Qe as FormInput,
+  D as FormSelect,
+  De as FormTextarea,
+  fe as Pagination,
+  He as Radio,
+  Ee as Tabs
+};