chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: dialog spacing

Browse source
This commit is contained in:
Methapon2001 2024-08-09 11:32:52 +07:00
parent d1b97124a1
commit 2be34124e1
4 changed files with 38 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/dialog/DialogContainer.vue
View file

@ -40,7 +40,7 @@ const state = defineModel({ default: false });
> >
<div class="column full-height"> <div class="column full-height">
<!-- NOTE: DIALOG HEADER --> <!-- NOTE: DIALOG HEADER -->
<div class="form-header q-py-sm q-px-lg"> <div class="form-header q-py-sm q-px-md">
<slot name="header" /> <slot name="header" />
</div> </div>
@ -55,7 +55,7 @@ const state = defineModel({ default: false });
<!-- NOTE: DIALOG FOOTER --> <!-- NOTE: DIALOG FOOTER -->
<div <div
v-if="footer || $slots.footer" v-if="footer || $slots.footer"
class="dialog-footer row items-center full-width justify-between q-px-md q-py-md surface-1" class="dialog-footer row items-center full-width justify-between q-px-md q-py-sm surface-1"
> >
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>

57
src/components/dialog/DialogFormContainer.vue
View file

@ -10,6 +10,7 @@ const props = defineProps<{
}>(); }>();
defineEmits<{ defineEmits<{
(e: 'submit', v: Event | SubmitEvent): void; (e: 'submit', v: Event | SubmitEvent): void;
(e: 'reset'): void;
}>(); }>();
function update(value: boolean) { function update(value: boolean) {
@ -31,41 +32,47 @@ const state = defineModel({ default: false });
@update:model-value="update" @update:model-value="update"
@before-show="() => onOpen?.((v) => (state = v === undefined ? true : v))" @before-show="() => onOpen?.((v) => (state = v === undefined ? true : v))"
> >
<q-form <div
@submit.prevent="(e) => $emit('submit', e)"
greedy
class="surface-1 rounded"
:style="{ :style="{
borderRadius: 'var(--radius-2)',
padding: '0', padding: '0',
width: $q.screen.xs ? '100%' : width ? width : '85%', width: $q.screen.xs ? '100%' : width ? width : '85%',
height: height ? height : 'calc(100vh - 64px)', height: height ? height : 'calc(100vh - 64px)',
maxWidth: $q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%', maxWidth: $q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%',
}" }"
> >
<div class="column full-height"> <q-form
<!-- NOTE: DIALOG HEADER --> @submit.prevent="(e) => $emit('submit', e)"
<div class="form-header q-py-sm q-px-lg"> @reset="$emit('reset')"
<slot name="header" /> greedy
</div> class="surface-1 rounded full-height full-width"
:style="{
borderRadius: 'var(--radius-2)',
}"
>
<div class="column full-height">
<!-- NOTE: DIALOG HEADER -->
<div class="form-header q-py-sm q-px-md">
<slot name="header" />
</div>
<!-- NOTE: DIALOG BODY --> <!-- NOTE: DIALOG BODY -->
<div <div
class="col full-height column full-width" class="col full-height column full-width"
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
> >
<slot /> <slot />
</div> </div>
<!-- NOTE: DIALOG FOOTER --> <!-- NOTE: DIALOG FOOTER -->
<div <div
v-if="footer || $slots.footer" v-if="footer || $slots.footer"
class="dialog-footer row items-center full-width justify-between q-px-md q-py-md surface-1" class="dialog-footer row items-center full-width justify-between q-px-md q-py-sm surface-1"
> >
<slot name="footer"></slot> <slot name="footer"></slot>
</div>
</div> </div>
</div> </q-form>
</q-form> </div>
</q-dialog> </q-dialog>
</template> </template>

15
src/components/dialog/DialogHeader.vue
View file

@ -1,4 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { CancelButton } from 'components/button';
defineProps<{ defineProps<{
title: string; title: string;
}>(); }>();
@ -11,18 +13,7 @@ defineProps<{
{{ title }} {{ title }}
<slot name="title-after" /> <slot name="title-after" />
</div> </div>
<q-btn <CancelButton icon-only v-close-popup />
round
flat
unelevated
icon="mdi-close"
padding="xs"
class="dialog-header-close"
:class="{ dark: $q.dark.isActive }"
v-close-popup
>
<q-tooltip>{{ $t('close') }}</q-tooltip>
</q-btn>
</div> </div>
</template> </template>

1
src/components/dialog/index.ts
View file

@ -1,2 +1,3 @@
export { default as DialogContainer } from './DialogContainer.vue'; export { default as DialogContainer } from './DialogContainer.vue';
export { default as DialogFormContainer } from './DialogFormContainer.vue';
export { default as DialogHeader } from './DialogHeader.vue'; export { default as DialogHeader } from './DialogHeader.vue';