alpine.js 를 이용한 Dialog Modal
생성
[code]
$ php aritisan make:component Modal
[/code]
레이아웃
[code]
<html>
<body>
….
@stack(‘botStack’)
</body>
</html>
[/code]
컴포넌트 blade
/resourses/views/components/modal.blade.php
[code]
<div {{ $attributes }} x-show=”show” x-on:keydown.escape.window=”show = false”
>
<div @click=”if (!enableClickAway) show=false”>
<div></div>
</div>
<div @click=”show=false”>
<div v-show=”title !== ””>
<div>
<span x-text=”title”></span>
</div>
<div>
<a @click=”show = false”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”#fff” viewBox=”0 0 24 24″
stroke=”#fff”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″
d=”M6 18L18 6M6 6l12 12″ />
</svg>
</a>
</div>
</div>
{{ $slot }}
<div x-show=”typeof buttons === ‘object’ && !Array.isArray(buttons) && Object.keys(buttons).length > 0″>
<template x-for=”key in Object.keys(buttons)” :key=”key”>
<div>
<template x-if=”key === ‘close'”>
<button type=”button” @click=”__doButtonClick(‘close’)”>
<span x-text=”buttons.close”></span>
</button>
</template>
<template x-if=”key === ‘confirm'”>
<button type=”button” @click=”__doButtonClick(‘confirm’)”>
<span x-text=”buttons.confirm”></span>
</button>
</template>
<template x-if=”key === ‘yes'”>
<button type=”button” @click=”__doButtonClick(‘yes’)”>
<span x-text=”buttons.yes”></span>
</button>
</template>
<template x-if=”key === ‘no'”>
<button type=”button” @click=”__doButtonClick(‘no’)”>
<span x-text=”buttons.no”>
</button>
</template>
</div>
</template>
</div>
</div>
</div>
@push(‘botStack’)
@once
<script>
Object.assignDeep = (target, …sources) => {
const isObject = (item) => {
return item && typeof item === ‘object’ && !Array.isArray(item)
}
if (!sources.length) return target
const source = sources.shift()
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, {
[key]: {}
})
if (isObject(target[key])) Object.assignDeep(target[key], source[key])
else target[key] = source[key]
} else if (Array.isArray(source[key])) {
if (!Array.isArray(target[key])) target[key] = []
for (const k in source[key]) {
target[key].push(source[key][k])
}
} else {
Object.assign(target, {
[key]: source[key]
})
}
}
return Object.assignDeep(target, …sources)
}
const Dialog = function(options) {
let defaultOptions = {
show: false,
enableClickAway: false,
buttons: {},
title: ”,
__init() {
this.show = typeof this.show !== ‘undefined’ ? this.show : false
this.title = typeof this.title !== ‘undefined’ ? this.title : false
this.enableClickAway =
typeof this.enableClickAway !== ‘undefined’ ?
this.enableClickAway :
true
},
__doButtonClick(event_name) {
this.$dispatch(‘dialog-‘ + event_name)
this.show = false
}
}
const res = Object.assignDeep({},
defaultOptions, options)
return res
}
</script>
@endonce
@endpush
[/code]
사용예제
[code]
<x-modal x-data=”Dialog({ buttons: { close: ‘닫기’, confirm: ‘확인’ } })” @open-dialog.window=”show=true”
@dialog-confirm.window=”alert(‘확인’)”>
<div>
다이얼로그 예제
</div>
</x-modal>
[/code]
옵션
button: {
close: ‘닫기’,
confirm: ‘확인’,
yes: ‘예’,
no: ‘아니오,
enableClickAway: [true | false] // 바깥쪽 눌렀을때 닫히게 할지
}
title: 제목
이벤트
dialog-close
dialog-confirm
dialog-yes
dialog-no
