ilk commit

src/components/global/DialogItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <teleport to="body">
+    <div class="dialog-w">
+      <span class="dialog-close" @click="CloseDialog"></span>
+      <div class="dialog-c">
+        <div
+          class="dialog-header"
+          v-if="localData.title !== undefined && localData.title !== ''">
+          <h3>{{ localData.title }}</h3>
+        </div>
+        <div
+          class="dialog-content"
+          v-if="localData.content !== undefined && localData.content !== ''">
+          {{ localData.content }}
+        </div>
+        <div class="dialog-footer">
+          <template
+            v-if="localData.buttons !== undefined && localData.buttons.length > 0"
+            v-for="(button, i) in dialogData.buttons">
+            <button
+              :class="['button-c', 'button-' + button.type]"
+              @click="button.function(id, button.data)">
+              {{ button.label }}
+            </button>
+          </template>
+          <button
+            v-if="localData.showClose"
+            class="button-c button-cancel"
+            @click="localData.closeFunction">
+            {{ localData.closeText }}
+          </button>
+        </div>
+      </div>
+
+      <div class="dialog-shadow" @click="CloseDialog"></div>
+    </div>
+  </teleport>
+</template>
+<script setup lang="ts">
+  import { onBeforeMount, reactive } from 'vue'
+  import { useDialogStore } from './dialogStore'
+  const dialogStore = useDialogStore()
+
+  export interface Props {
+    id: number
+    dialogData: Record<string, any>
+  }
+  const props = withDefaults(defineProps<Props>(), {})
+  const localData = reactive({
+    title: '',
+    content: '',
+    showClose: true,
+    closeText: 'Kapat',
+    closeFunction: () => {
+      CloseDialog()
+    },
+    buttons: []
+  })
+
+  const CreateData = () => {
+    Object.assign(localData, props.dialogData)
+  }
+
+  const CloseDialog = () => {
+    delete dialogStore.dialogs[props.id]
+  }
+  onBeforeMount(() => {
+    CreateData()
+  })
+</script>
+<style scoped>
+  .dialog-w {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+  }
+  .dialog-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+  }
+  .dialog-c {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    max-width: 480px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 9;
+    position: relative;
+    padding: 24px;
+  }
+  .dialog-header {
+    margin-bottom: 16px;
+  }
+  .dialog-content {
+    margin-bottom: 16px;
+  }
+  .dialog-footer {
+    display: flex;
+  }
+  .dialog-close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    z-index: 9;
+    cursor: pointer;
+  }
+  .dialog-close::before,
+  .dialog-close::after {
+    content: '';
+    flex-direction: block;
+    width: 32px;
+    height: 2px;
+    background-color: #fff;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+  .dialog-close::after {
+    transform: rotate(-45deg);
+  }
+</style>