@bagelink/vue 1.4.161 → 1.4.163
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Modal.vue.d.ts.map +1 -1
- package/dist/components/calendar/Index.vue.d.ts +2 -0
- package/dist/components/calendar/Index.vue.d.ts.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +2 -2
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Modal.vue +59 -25
- package/src/components/calendar/Index.vue +4 -4
package/package.json
CHANGED
package/src/components/Modal.vue
CHANGED
|
@@ -61,7 +61,6 @@ const maxWidth = $computed(() => {
|
|
|
61
61
|
const isOverlay = $computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
|
|
62
62
|
const isHeader = $computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
|
|
63
63
|
const isFooter = $computed(() => props.closePlacement === 'footer')
|
|
64
|
-
const isNone = $computed(() => props.closePlacement === 'none')
|
|
65
64
|
|
|
66
65
|
const overlayCloseClass = $computed(() => {
|
|
67
66
|
if (props.closePlacement === 'overlay-end') return 'top-1 end-1'
|
|
@@ -75,7 +74,7 @@ function closeModal() {
|
|
|
75
74
|
|
|
76
75
|
defineExpose({ closeModal })
|
|
77
76
|
|
|
78
|
-
|
|
77
|
+
function escapeKeyClose(e: KeyboardEvent) {
|
|
79
78
|
if (props.dismissable && e.key === 'Escape') {
|
|
80
79
|
closeModal()
|
|
81
80
|
}
|
|
@@ -93,45 +92,80 @@ onUnmounted(() => {
|
|
|
93
92
|
</script>
|
|
94
93
|
|
|
95
94
|
<template>
|
|
96
|
-
<div
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
95
|
+
<div
|
|
96
|
+
class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
|
|
97
|
+
@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
|
|
98
|
+
>
|
|
99
|
+
<!-- Overlay close button -->
|
|
100
|
+
<Btn
|
|
101
|
+
v-if="dismissable && isOverlay" icon="close" icon-mobile-size="1.4" class="fixed"
|
|
102
|
+
:class="overlayCloseClass" @click="closeModal"
|
|
103
|
+
/>
|
|
104
|
+
|
|
105
|
+
<Card
|
|
106
|
+
class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin"
|
|
107
|
+
:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }" @click.stop
|
|
108
|
+
>
|
|
109
|
+
<header v-if="slots.toolbar || title" class="tool-bar w-100p flex space-between sticky z-3 py-1">
|
|
110
|
+
<!-- Header close button -->
|
|
111
|
+
<Btn
|
|
112
|
+
v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
|
|
113
|
+
flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
|
|
114
|
+
/>
|
|
115
|
+
<slot name="toolbar" />
|
|
116
|
+
<Title
|
|
117
|
+
v-if="title" class="modal-title txt-center txt20 medium my-0 w-100p ellipsis-1" tag="h3"
|
|
118
|
+
:label="title"
|
|
119
|
+
:class="{ 'me-1-5': isHeader && dismissable && closePlacement === 'header', 'ms-1-5': isHeader && dismissable && closePlacement === 'header-end' }"
|
|
120
|
+
/>
|
|
121
|
+
<!-- Header-end close button -->
|
|
122
|
+
<Btn
|
|
123
|
+
v-if="dismissable && isHeader && closePlacement === 'header-end'"
|
|
124
|
+
:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
|
|
125
|
+
@click="closeModal"
|
|
126
|
+
/>
|
|
110
127
|
</header>
|
|
111
|
-
|
|
112
|
-
<header
|
|
128
|
+
|
|
129
|
+
<header
|
|
130
|
+
v-else class="tool-bar w-100p flex space-between sticky z-3"
|
|
131
|
+
:class="{ 'py-1': !isOverlay, 'pt-1': isOverlay }"
|
|
132
|
+
>
|
|
113
133
|
<!-- Header close button (no title) -->
|
|
114
|
-
<Btn
|
|
134
|
+
<Btn
|
|
135
|
+
v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
|
|
136
|
+
flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
|
|
137
|
+
/>
|
|
115
138
|
<slot name="toolbar" />
|
|
116
139
|
<!-- Header-end close button (no title) -->
|
|
117
|
-
<Btn
|
|
140
|
+
<Btn
|
|
141
|
+
v-if="dismissable && isHeader && closePlacement === 'header-end'"
|
|
142
|
+
:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" class="ms-auto"
|
|
143
|
+
@click="closeModal"
|
|
144
|
+
/>
|
|
118
145
|
</header>
|
|
119
|
-
|
|
146
|
+
|
|
120
147
|
<slot />
|
|
121
|
-
<footer
|
|
148
|
+
<footer
|
|
149
|
+
v-if="slots.footer || actions?.length" class="modal-footer gap-1 flex space-between"
|
|
150
|
+
:class="{ 'mt-1': !side, 'mt-auto': side }"
|
|
151
|
+
>
|
|
122
152
|
<Btn v-for="(action, i) in actions" :key="i" color="gray" v-bind="action" @click="closeModal" />
|
|
123
153
|
<slot name="footer" />
|
|
124
154
|
<!-- Footer close button -->
|
|
125
155
|
</footer>
|
|
126
|
-
<Btn
|
|
127
|
-
|
|
128
|
-
|
|
156
|
+
<Btn
|
|
157
|
+
v-if="dismissable && isFooter" icon="close" label="Close"
|
|
158
|
+
class="mx-auto absolute start-0 end-0 modalFooterBtn" @click="closeModal"
|
|
159
|
+
/>
|
|
160
|
+
</Card>
|
|
161
|
+
</div>
|
|
129
162
|
</template>
|
|
130
163
|
|
|
131
164
|
<style>
|
|
132
165
|
.modal {
|
|
133
166
|
color: var(--bgl-popup-text);
|
|
134
167
|
}
|
|
168
|
+
|
|
135
169
|
.modal .bgl_btn.bgl_btn_flat {
|
|
136
170
|
color: var(--bgl-popup-text) !important;
|
|
137
171
|
}
|
|
@@ -147,8 +147,8 @@ onMounted(() => { emit('ready', state.value) })
|
|
|
147
147
|
@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
|
|
148
148
|
@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
|
|
149
149
|
>
|
|
150
|
-
<template #eventContent="{ event }">
|
|
151
|
-
<slot name="eventContent" :event="event" />
|
|
150
|
+
<template #eventContent="{ event, close }">
|
|
151
|
+
<slot name="eventContent" :event="event" :close="close" />
|
|
152
152
|
</template>
|
|
153
153
|
</component>
|
|
154
154
|
|
|
@@ -157,8 +157,8 @@ onMounted(() => { emit('ready', state.value) })
|
|
|
157
157
|
:event="activeEvent" :position="popoverPosition" :show="showPopover"
|
|
158
158
|
:has-event-content-slot="!!$slots.eventContent" @close="closePopover" @event-click="handleEventClick"
|
|
159
159
|
>
|
|
160
|
-
<template #eventContent="{ event }">
|
|
161
|
-
<slot name="eventContent" :event="event" />
|
|
160
|
+
<template #eventContent="{ event, close }">
|
|
161
|
+
<slot name="eventContent" :event="event" :close="close" />
|
|
162
162
|
</template>
|
|
163
163
|
</CalendarPopover>
|
|
164
164
|
</div>
|