@ulu/frontend-vue 0.2.0-beta.13 → 0.2.0-beta.14

package/dist/components/collapsible/UluTabGroup.vue.d.ts

@@ -5,9 +5,11 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     vertical: boolean;
+    modifiers?: string | unknown[] | undefined;
     defaultIndex?: number | undefined;
     $props: {
         readonly vertical?: boolean | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
         readonly defaultIndex?: number | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/collapsible/UluTabGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAYA;wBAwHqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;2OAOG"}
+{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAoBA;wBAmJqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;2OAOG"}

package/dist/components/collapsible/UluTabGroup.vue.js

@@ -1,6 +1,7 @@
-import { createBlock as r, openBlock as l, unref as o, withCtx as n, createElementVNode as c, normalizeClass as i, renderSlot as s, normalizeProps as u, guardReactiveProps as d } from "vue";
-import { TabGroup as f } from "@headlessui/vue";
-const b = /* @__PURE__ */ Object.assign({
+import { createBlock as l, openBlock as i, unref as t, withCtx as n, createElementVNode as d, mergeProps as c, renderSlot as u, normalizeProps as f, guardReactiveProps as m } from "vue";
+import { TabGroup as p } from "@headlessui/vue";
+import { useModifiers as v } from "../../composables/useModifiers.js";
+const h = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "UluTabGroup",
@@ -12,26 +13,34 @@ const b = /* @__PURE__ */ Object.assign({
     /**
      * Whether or not to use vertical layout
      */
-    vertical: Boolean
+    vertical: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
   },
   setup(e) {
-    return (t, m) => (l(), r(o(f), {
+    const a = e, { resolvedModifiers: s } = v({ props: a, baseClass: "tabs" });
+    return (r, b) => (i(), l(t(p), {
       defaultIndex: e.defaultIndex,
       vertical: e.vertical
     }, {
-      default: n((a) => [
-        c("div", {
-          class: i(["tabs", {
-            "tabs--vertical": e.vertical
-          }])
-        }, [
-          s(t.$slots, "default", u(d(a)))
-        ], 2)
+      default: n((o) => [
+        d("div", c(r.$attrs, {
+          class: ["tabs", [
+            t(s),
+            {
+              "tabs--vertical": e.vertical
+            }
+          ]]
+        }), [
+          u(r.$slots, "default", f(m(o)))
+        ], 16)
       ]),
       _: 3
     }, 8, ["defaultIndex", "vertical"]));
   }
 });
 export {
-  b as default
+  h as default
 };

package/lib/components/collapsible/UluTabGroup.vue

@@ -1,10 +1,18 @@
 <template>
-  <TabGroup v-slot="slotProps" :defaultIndex="defaultIndex" :vertical="vertical">
+  <TabGroup 
+    v-slot="slotProps" 
+    :defaultIndex="defaultIndex" 
+    :vertical="vertical"
+  >
     <div 
+      v-bind="$attrs"
       class="tabs" 
-      :class="{
-       'tabs--vertical' : vertical 
-      }"
+      :class="[
+        resolvedModifiers,
+        {
+         'tabs--vertical' : vertical 
+        }
+      ]"
     >
       <slot v-bind="slotProps"/>
     </div>
@@ -13,12 +21,13 @@
 
 <script setup>
   import { TabGroup } from "@headlessui/vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
 
   defineOptions({ 
     inheritAttrs: false 
   });
 
-  defineProps({ 
+  const props = defineProps({ 
     /**
      * Active tab index by default
      */
@@ -26,6 +35,12 @@
     /**
      * Whether or not to use vertical layout
      */
-    vertical: Boolean
+    vertical: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
   });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "tabs" });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.2.0-beta.13",
+  "version": "0.2.0-beta.14",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [