ContentDialog

Basic

<script setup lang="ts">
import { ref } from 'vue';
import {
    Btn,
    OverlayMask,
    ContentDialog,
    Tree,
    InputText,
} from '@jennifersoft/vue-components-v2';

const treeData = ref([
    {
        label: 'RnD 대시보드 모음',
        dashboard_ids: ['dashboard_id1', 'dashboard_id2', 'dashboard_id3'],
        isOpen: true,
        id: 'id1',
        children: [
            {
                label: 'David 대시보드',
                id: 'id2',
                isOpen: true,
                children: [
                    {
                        label: '기술지원',
                        id: 'id3',
                        isOpen: true,
                        dashboard_ids: [
                            'dashboard_id4',
                            'dashboard_id5',
                            'dashboard_id6',
                        ],
                        children: [
                            {
                                label: '싸이웰 시스템',
                                id: 'id4',
                                dashboard_ids: ['dashboard_id7'],
                            },
                            {
                                label: '지티플러스',
                                id: 'id5',
                                dashboard_ids: ['dashboard_id8'],
                            },
                            {
                                label: '이인티그레이션',
                                id: 'id6',
                                dashboard_ids: ['dashboard_id9'],
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Aiden 대시보드',
                id: 'id7',
                children: [
                    {
                        label: '기술지원',
                        id: 'id8',
                        dashboard_ids: [
                            'dashboard_id10',
                            'dashboard_id11',
                            'dashboard_id12',
                        ],
                    },
                ],
            },
        ],
    },
]);

const dialog1 = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);

const fileName = ref('');
const selectedId = ref('id3');

const showDialog1 = () => {
    dialog1.value = true;
};

const hideDialog1 = () => {
    dialog1.value = false;
};

const showDialog2 = () => {
    dialog2.value = true;
};

const hideDialog2 = () => {
    dialog2.value = false;
};

const showDialog3 = () => {
    dialog3.value = true;
};

const hideDialog3 = () => {
    dialog3.value = false;
};
</script>

<template>
    <div>
        <btn type="outlined" text="새폴더" @click="showDialog1" />
        <btn type="outlined" text="트리" @click="showDialog2" />
        <btn type="outlined" text="트리(Footer)" @click="showDialog3" />
        <overlay-mask v-if="dialog1 | dialog2 | dialog3">
            <content-dialog v-if="dialog1" @close="hideDialog1">
                <template v-slot:title> 새 폴더 만들기 </template>
                <template v-slot:body>
                    <input-text
                        class="w-full"
                        v-model="fileName"
                        :placeholder="'새 폴더'"
                    />
                </template>
                <template v-slot:footer>
                    <div class="flex flex-row justify-between w-full">
                        <div></div>
                        <div class="flex flex-row gap-2">
                            <btn
                                type="outlined"
                                text="취소"
                                @click="hideDialog1()"
                            />
                            <btn
                                type="primary-filled"
                                text="추가"
                                @click="hideDialog1()"
                            />
                        </div>
                    </div>
                </template>
            </content-dialog>
            <content-dialog v-if="dialog2" @close="hideDialog2">
                <template v-slot:title> 폴더 트리 </template>
                <template v-slot:body>
                    <tree
                        :nodes="treeData"
                        v-model="selectedId"
                        tree-type="folder"
                        class="h-[20rem]"
                    />
                </template>
            </content-dialog>
            <content-dialog v-if="dialog3" @close="hideDialog3">
                <template v-slot:title> 폴더 트리 </template>
                <template v-slot:body>
                    <tree
                        :nodes="treeData"
                        v-model="selectedId"
                        tree-type="folder"
                        class="h-[20rem]"
                    />
                </template>
                <template v-slot:footer>
                    <div class="flex flex-row justify-between w-full">
                        <div>
                            <btn
                                type="outlined"
                                text="이번에만 적용"
                                @click="hideDialog3()"
                            />
                        </div>
                        <div class="flex flex-row gap-2">
                            <btn
                                type="outlined"
                                text="취소"
                                @click="hideDialog3()"
                            />
                            <btn
                                type="primary-filled"
                                text="추가"
                                @click="hideDialog3()"
                            />
                        </div>
                    </div>
                </template>
            </content-dialog>
        </overlay-mask>
    </div>
</template>

API

Event

Name	Parameter	Description
close	void	상단 우측에 닫기 버튼을 클릭했을때 실행되는 이벤트