Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
interface Item {
|
|
icon: string
|
|
label: string
|
|
detail?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
items: Item[]
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'gridIconLabelDetail',
|
|
{
|
|
slots: {
|
|
base: 'grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]',
|
|
item: 'flex flex-row items-stretch',
|
|
icon: 'shrink-0 w-6 h-6 mt-0.5',
|
|
texts: 'flex flex-col justify-start',
|
|
label: '',
|
|
detail: '',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<div v-for="(item, index) in props.items" :class="classes.item" :key="index">
|
|
<UIcon :class="classes.icon" :name="item.icon" />
|
|
|
|
<div :class="classes.texts">
|
|
<XText :class="classes.label" as="label" :text="item.label" :margin="!!item.detail" />
|
|
<XText
|
|
v-if="item.detail"
|
|
:class="classes.detail"
|
|
as="detail"
|
|
:text="item.detail"
|
|
:margin="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|