Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { h, useSlots, Component, Comment, Fragment } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
orientation: 'horizontal' | 'vertical'
|
|
separator?: Component
|
|
separatorProps?: any
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'separatorList',
|
|
{
|
|
slots: {
|
|
base: 'flex items-center',
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
base: 'flex-row',
|
|
},
|
|
vertical: {
|
|
base: 'flex-col',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
props
|
|
)
|
|
|
|
const slots = useSlots()
|
|
|
|
function renderChildren() {
|
|
const children = slots.default ? slots.default() : []
|
|
|
|
// if (!props.separator) {
|
|
// return children
|
|
// }
|
|
|
|
const filtered = children.flatMap((child) => {
|
|
if (child.type === Comment) {
|
|
return []
|
|
}
|
|
if (child.type === Fragment) {
|
|
return child.children || []
|
|
}
|
|
return [child]
|
|
})
|
|
|
|
const separatedChildren = []
|
|
|
|
for (let i = 0; i < filtered.length; i++) {
|
|
separatedChildren.push(filtered[i])
|
|
|
|
if (i < filtered.length - 1) {
|
|
separatedChildren.push(h(props.separator, props.separatorProps))
|
|
}
|
|
}
|
|
|
|
return separatedChildren
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<renderChildren />
|
|
</div>
|
|
</template>
|