ilk commit

src/components/PanelWrapper.vue

@@ -0,0 +1,59 @@
+<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>