|
|
|
|
@ -1,9 +1,12 @@ |
|
|
|
|
<template> |
|
|
|
|
<Toolbar :class="toolbarClass"> |
|
|
|
|
<template v-slot:start> |
|
|
|
|
<template v-if="!hasStartSlot && !hasEndSlot" #start> |
|
|
|
|
<slot></slot> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="hasStartSlot" v-slot:start> |
|
|
|
|
<slot name="start"></slot> |
|
|
|
|
</template> |
|
|
|
|
<template v-slot:end> |
|
|
|
|
<template v-if="hasEndSlot" v-slot:end> |
|
|
|
|
<slot name="end"></slot> |
|
|
|
|
</template> |
|
|
|
|
</Toolbar> |
|
|
|
|
@ -11,7 +14,8 @@ |
|
|
|
|
|
|
|
|
|
<script setup> |
|
|
|
|
import Toolbar from "primevue/toolbar" |
|
|
|
|
import { computed } from "vue" |
|
|
|
|
import { computed, onMounted, ref } from "vue" |
|
|
|
|
import { useSlots } from 'vue' |
|
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
|
showTopBorder: { |
|
|
|
|
@ -21,9 +25,15 @@ const props = defineProps({ |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const toolbarClass = computed(() => { |
|
|
|
|
if (props.showTopBorder) { |
|
|
|
|
return "pt-5 border-t border-b" |
|
|
|
|
} |
|
|
|
|
return "p-toolbar" |
|
|
|
|
return props.showTopBorder ? "pt-5 border-t border-b" : "p-toolbar" |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const slots = useSlots() |
|
|
|
|
const hasStartSlot = ref(false) |
|
|
|
|
const hasEndSlot = ref(false) |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
hasStartSlot.value = !!slots.start |
|
|
|
|
hasEndSlot.value = !!slots.end |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|