1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { ref, watch } from 'vue'
import type { Playlist } from '../types'
import { SwitchInput } from './SwitchInput.vine'
export const EditPlaylistModal = ({
playlist,
mode = 'edit',
}: {
playlist: Playlist,
mode?: 'create' | 'edit',
}) => {
const emit = vineEmits(['close', 'update-playlist', 'create-playlist'])
const
local = ref(playlist ?? {
name: '',
comment: '',
isPublic: false
}),
save = () => {
if (!local.value.name?.trim()) {
alert('Name cannot be empty')
return
}
if (mode !== 'edit') {
emit('create-playlist', local.value.name)
} else {
emit('update-playlist', { ...local.value })
}
emit('close')
}
watch(
() => playlist,
(newVal) => {
local.value = newVal ?? {
name: '',
comment: '',
isPublic: false
}
},
{ immediate: true }
)
return vine`
<Teleport to="#dialogBoxes">
<dialog open @click="$emit('close')">
<article @click.stop>
<h2>{{ mode === 'edit' ? 'Edit Playlist' : 'New Playlist' }}</h2>
<form>
<fieldset>
<label>
Name
<input v-model="local.name" type="text">
</label>
<label v-if="mode === 'edit'">
Comment
<textarea v-model="local.comment" class="form-control" />
</label>
<label v-if="mode === 'edit'">
<SwitchInput v-model="local.isPublic" />
Public
</label>
</fieldset>
<footer>
<button @click.stop="$emit('close')">
Cancel
</button>
<button @click.stop="save" class="contrast">
{{ mode === 'edit' ? 'Save' : 'Create' }}
</button>
</footer>
</form>
</article>
</dialog>
</Teleport>
`
}