@dolanske/vui 1.1.4 → 1.2.0

package/src/examples/ExampleTabs.vue

@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue'
 import { ref } from 'vue'
 import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
 import Tab from '../components/Tabs/Tab.vue'
 import Tabs from '../components/Tabs/Tabs.vue'
 // import Flex from '../components/Flex/Flex.vue'
@@ -9,8 +10,8 @@ import Tabs from '../components/Tabs/Tabs.vue'
 const activeTab = ref('Home')
 
 // Dynamic test
-// const dynamicTabs = ref(['First', 'Second', "Third"])
-// const activeDynamic = ref(dynamicTabs.value[0])
+const dynamicTabs = ref(['First', 'Second', 'Third'])
+const activeDynamic = ref(dynamicTabs.value[0])
 </script>
 
 <template>
@@ -24,9 +25,9 @@ const activeTab = ref('Home')
           <th>Base</th>
           <td>
             <Tabs v-model="activeTab">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
           </td>
         </tr>
@@ -34,9 +35,9 @@ const activeTab = ref('Home')
           <th>Filled</th>
           <td>
             <Tabs v-model="activeTab" variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
           </td>
         </tr>
@@ -44,17 +45,17 @@ const activeTab = ref('Home')
           <th>Expanded</th>
           <td class="w-100">
             <Tabs v-model="activeTab" expand>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
 
             <div class="mb-xl" />
 
             <Tabs v-model="activeTab" expand variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
           </td>
         </tr>
@@ -70,17 +71,17 @@ const activeTab = ref('Home')
                   Sidebar
                 </Button>
               </template>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
 
             <div class="mb-xl" />
 
             <Tabs v-model="activeTab" variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
 
               <template #end>
                 <Button icon="ph:x" plain />
@@ -100,17 +101,17 @@ const activeTab = ref('Home')
                   Sidebar
                 </Button>
               </template>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
             </Tabs>
 
             <div class="mb-xl" />
 
             <Tabs v-model="activeTab" expand variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
+              <Tab value="Home" />
+              <Tab value="About" />
+              <Tab value="You" />
 
               <template #end>
                 <Button icon="ph:x" plain />
@@ -118,18 +119,22 @@ const activeTab = ref('Home')
             </Tabs>
           </td>
         </tr>
-        <!-- <tr>
+        <tr>
           <th>Dynamic</th>
           <td>
             <Flex>
-              <Button @click="dynamicTabs.push(`Tab ${dynamicTabs.length}`)">Add</Button>
-              <Button @click="dynamicTabs.shift()">Remove</Button>
+              <Button @click="dynamicTabs.push(`Tab ${dynamicTabs.length}`)">
+                Add
+              </Button>
+              <Button @click="dynamicTabs.shift()">
+                Remove
+              </Button>
             </Flex>
-            <Tabs v-model="dynamicTabs">
-              <Tab v-for="tab in dynamicTabs" />
+            <Tabs v-model="activeDynamic">
+              <Tab v-for="tab in dynamicTabs" :key="tab" :value="tab" />
             </Tabs>
           </td>
-        </tr> -->
+        </tr>
       </tbody>
     </table>
   </div>

package/src/shared/slots.ts

@@ -0,0 +1,61 @@
+import type { ShallowRef, VNode } from 'vue'
+import { computed, Fragment, shallowRef, watchEffect } from 'vue'
+
+type VNodesProps<T extends object> = Array<VNode & { props: T }>
+
+/**
+ * Flattens slot children and keeps them in sync reactively.
+ * @param slotFn The slot function (e.g., slots.default)
+ * @returns Computed array of flattened VNodes
+ */
+export function useFlattenedSlot<T extends object>(slotFn?: () => VNode[] | undefined): ShallowRef<VNodesProps<T>> {
+  const rawChildren = shallowRef<VNodesProps<T>>([])
+
+  // Flatten VNodes recursively (handles Fragments)
+  function flatten(vnodes: VNode[]): VNodesProps<T> {
+    const result: VNode[] = []
+
+    const walk = (nodes: VNode[] | VNode | undefined): void => {
+      if (!nodes)
+        return
+
+      if (Array.isArray(nodes)) {
+        nodes.forEach(walk)
+      }
+      else if (nodes.type === Fragment || Array.isArray(nodes.children)) {
+        walk(nodes.children as VNode[])
+      }
+      else {
+        result.push(nodes)
+      }
+    }
+
+    walk(vnodes)
+    return result as VNodesProps<T>
+  }
+
+  // Re-compute children whenever slot content changes
+  watchEffect(() => {
+    const content = slotFn?.() ?? []
+    rawChildren.value = flatten(content)
+  })
+
+  return computed(() => rawChildren.value)
+}
+
+/**
+ * Checks whether all of the provided VNodes are of the same type. Throws an
+ * error if not. This function should be used in components that only allow a
+ * single type of component
+ *
+ * @param vnodes Array of VNodes to check
+ * @param name Expected name of the components
+ */
+export function enforceSlotType(vnodes: ShallowRef<VNodesProps<any>>, name: string): void {
+  watchEffect(() => {
+    // @ts-expect-error Accessing internals
+    if (vnodes.value.some(item => item.type.__name !== name)) {
+      throw new Error(`You can only pass \`<${name} />\` components as children.`)
+    }
+  })
+}