feat(modal): enhance modal functionality with resizing support and improved layout

This commit is contained in:
Matej Glasnák committed 2026-01-07 09:15:52 +01:00
1 parent 54e12a1713
commit 9c32c0d99f
23 files changed
+569 -331

No files matched your search

@@ -1,39 +1,52 @@
<template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
<v-card style="position: relative">
<div class="d-flex justify-space-between align-center">
<h1>Vytvoriť</h1>
<div class="d-flex align-center">
<a-reset-size-button @reset="resetModalSize" />
<a-close-button @close="closeModal()" />
</div>
</div>
<v-dialog
v-model="visible"
:width="modalWidth"
:height="modalHeight"
persistent
:retain-focus="false"
>
<v-card style="position: relative; height: 100%">
<div class="d-flex justify-space-between align-center">
<h1>Vytvoriť</h1>
<div class="d-flex align-start">
<a-reset-size-button @reset="resetModalSize" />
<a-close-button @close="closeModal()" />
</div>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
<v-btn class="button primary half outline" @click.stop="createTask()"
>SUB TASK</v-btn
>
<v-btn class="button primary half outline" @click.stop="createBlocker()"
>BLOCKER</v-btn
>
</v-card-actions>
<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" />
</v-card>
</v-dialog>
<v-card-actions
class="mt-10 d-flex justify-start align-center mobile-view"
>
<v-btn class="button primary half outline" @click.stop="createTask()"
>SUB TASK</v-btn
>
<v-btn class="button primary half outline" @click.stop="createBlocker()"
>BLOCKER</v-btn
>
</v-card-actions>
<a-resize-handle
:current-width="modalWidthPx"
:current-height="modalHeightPx"
@resize="handleModalResize"
@resize-end="handleResizeEnd"
/>
</v-card>
</v-dialog>
</template>
<script>
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue'
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue'
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
export default {
components: {
AResizeHandle,
AResetSizeButton, ACloseButton,
},
components: {
AResizeHandle,
AResetSizeButton,
ACloseButton,
},
mixins: [modalMixin],
props: {
data: {
@@ -43,13 +56,14 @@ export default {
},
emits: ['update', 'data'],
data() {
return {
visible: false,
localData: null,
modalName: 'z-show-menu-modal',
}
},
data() {
return {
visible: false,
localData: null,
modalName: 'z-show-menu-modal',
modalSize: 'small',
};
},
mounted() {
this.$events.on('blocker-created', () => {