60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
'panel-wrapper',
|
|
'panel-right',
|
|
localShow ? 'showme' : '',
|
|
$slots.footerButton ? 'panel-have-footer' : '',
|
|
wide ? 'panel-wide' : '',
|
|
full ? 'panel-full' : ''
|
|
]">
|
|
<div class="panel-header">
|
|
<h3>{{ panelTitle }}</h3>
|
|
<span class="panel-close panel-close-btn" @click="closePanel"></span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<slot name="panelContent"></slot>
|
|
</div>
|
|
<div class="panel-footer" v-if="$slots.footerButton">
|
|
<slot name="footerButton"></slot>
|
|
<button class="button-c button-cancel panel-close" @click="closePanel">
|
|
Vazgeç
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div :class="['menu-side-shadow', localShow ? 'showme' : '']" @click="closePanel"></div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useGlobalStore } from '@/stores/globalStore'
|
|
|
|
interface Props {
|
|
panelTitle: string
|
|
modelValue: boolean
|
|
wide?: boolean
|
|
full?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
wide: false,
|
|
full: false
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const globalStore = useGlobalStore()
|
|
const localShow = ref<Boolean>(false)
|
|
|
|
const closePanel = () => {
|
|
localShow.value = false
|
|
setTimeout(() => {
|
|
emit('update:modelValue', false)
|
|
}, globalStore.animateTime)
|
|
}
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
localShow.value = props.modelValue
|
|
}, 10)
|
|
})
|
|
</script>
|