/
Slideover.vue
129 lines (116 loc) · 3.43 KB
/
Slideover.vue
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild>
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<HDialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
<slot />
</HDialogPanel>
</TransitionChild>
</HDialog>
</TransitionRoot>
</template>
<script lang="ts">
import { computed, toRef, defineComponent } from 'vue'
import type { WritableComputedRef, PropType } from 'vue'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { slideover } from '#ui/ui.config'
import { useId } from '#imports'
const config = mergeConfig<typeof slideover>(appConfig.ui.strategy, appConfig.ui.slideover, slideover)
export default defineComponent({
components: {
HDialog,
HDialogPanel,
TransitionRoot,
TransitionChild
},
inheritAttrs: false,
props: {
modelValue: {
type: Boolean as PropType<boolean>,
default: false
},
appear: {
type: Boolean,
default: false
},
side: {
type: String as PropType<'left' | 'right'>,
default: 'right',
validator: (value: string) => ['left', 'right'].includes(value)
},
overlay: {
type: Boolean,
default: true
},
transition: {
type: Boolean,
default: true
},
preventClose: {
type: Boolean,
default: false
},
class: {
type: [String, Object, Array] as PropType<any>,
default: () => ''
},
ui: {
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
default: () => ({})
}
},
emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
setup (props, { emit }) {
const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
const isOpen: WritableComputedRef<boolean> = computed({
get () {
return props.modelValue
},
set (value) {
emit('update:modelValue', value)
}
})
const transitionClass = computed(() => {
if (!props.transition) {
return {}
}
return {
...ui.value.transition,
enterFrom: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right,
enterTo: ui.value.translate.base,
leaveFrom: ui.value.translate.base,
leaveTo: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right
}
})
function close (value: boolean) {
if (props.preventClose) {
emit('close-prevented')
return
}
isOpen.value = value
emit('close')
}
const onAfterLeave = () => {
emit('after-leave')
}
provideUseId(() => useId())
return {
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
transitionClass,
onAfterLeave,
close
}
}
})
</script>