@ulu/frontend-vue 0.6.8 → 0.6.10

package/lib/components/collapsible/UluTab.vue

@@ -1,6 +1,8 @@
 <template>
-  <Tab v-slot="slotProps">
-    <slot v-bind="slotProps"/>
+  <Tab class="tabs__tab">
+    <template #default="slotProps">
+      <slot v-bind="slotProps"/>
+    </template>
   </Tab>
 </template>
 

package/lib/components/collapsible/UluTabGroup.vue

@@ -7,12 +7,7 @@
     <div 
       v-bind="$attrs"
       class="tabs" 
-      :class="[
-        resolvedModifiers,
-        {
-         'tabs--vertical' : vertical 
-        }
-      ]"
+      :class="resolvedModifiers"
     >
       <slot v-bind="slotProps"/>
     </div>
@@ -20,6 +15,7 @@
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { TabGroup } from "@headlessui/vue";
   import { useModifiers } from "../../composables/useModifiers.js";
 
@@ -36,11 +32,27 @@
      * Whether or not to use vertical layout
      */
     vertical: Boolean,
+    /**
+     * Whether or not to use sticky modifier (tablist)
+     */
+    sticky: Boolean,
+    /**
+     * Whether or not to use transparent modifier (tab panels)
+     */
+    transparent: Boolean,
     /**
      * Class modifiers (ie. 'transparent', 'secondary', etc)
      */
     modifiers: [String, Array]
   });
 
-  const { resolvedModifiers } = useModifiers({ props, baseClass: "tabs" });
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "tabs",
+    internal: computed(() => ({
+      "vertical" : props.vertical,
+      "sticky" : props.sticky,
+      "transparent" : props.transparent
+    }))
+  });
 </script>

package/lib/components/collapsible/UluTabPanel.vue

@@ -1,6 +1,8 @@
 <template>
-  <TabPanel v-slot="slotProps">
-    <slot v-bind="slotProps"/>
+  <TabPanel class="tabs__tabpanel">
+    <template #default="slotProps">
+      <slot v-bind="slotProps"/>
+    </template>
   </TabPanel>
 </template>
 

package/lib/components/collapsible/UluTabPanels.vue

@@ -1,6 +1,8 @@
 <template>
-  <TabPanels as="template" v-slot="slotProps">
-    <slot v-bind="slotProps"/>
+  <TabPanels as="template">
+    <template #default="slotProps">
+      <slot v-bind="slotProps"/>
+    </template>
   </TabPanels>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [