1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-29 01:56:34 +00:00
homebox/frontend/components/global/DetailsSection/DetailsSection.vue
Hayden 2d34557f69
feat: link implementation ()
* link implementation

* add docs for links

* use btn instead of badge
2022-10-19 21:31:08 -08:00

39 lines
1.4 KiB
Vue

<template>
<div class="border-t border-gray-300 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-300">
<div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-base-content">
{{ detail.name }}
</dt>
<dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0">
<slot :name="detail.slot || detail.name" v-bind="{ detail }">
<DateTime v-if="detail.type == 'date'" :date="detail.text" />
<Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
<template v-else-if="detail.type === 'link'">
<div class="tooltip tooltip-primary tooltip-right" :data-tip="detail.href">
<a class="btn btn-primary btn-xs" :href="detail.href" target="_blank">
<Icon name="mdi-open-in-new" class="mr-2 swap-on"></Icon>
{{ detail.text }}
</a>
</div>
</template>
<template v-else>
{{ detail.text }}
</template>
</slot>
</dd>
</div>
</dl>
</div>
</template>
<script setup lang="ts">
import type { CustomDetail, Detail } from "./types";
defineProps({
details: {
type: Object as () => (Detail | CustomDetail)[],
required: true,
},
});
</script>