feat: FormDialog
This commit is contained in:
puriphatt
parent
541c5ed1bb
commit
0f750a1861
3 changed files with 408 additions and 5 deletions
259
src/components/FormDialog.vue
Normal file
259
src/components/FormDialog.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
addressLocaleTitle: string;
|
||||
addressEngTitle: string;
|
||||
}>();
|
||||
|
||||
interface Address {
|
||||
address: string;
|
||||
province: string;
|
||||
district: string;
|
||||
subDistrict: string;
|
||||
zip: string;
|
||||
}
|
||||
|
||||
const modal = defineModel('modal', { default: false });
|
||||
const addressL = defineModel<Address>('addressL');
|
||||
const addressEng = defineModel<Address>('addressEng');
|
||||
|
||||
const addrOptions = ref({
|
||||
provinceOps: [
|
||||
{ label: 'เชียงใหม่', value: '1' },
|
||||
{ label: 'เชียงราย', value: '2' },
|
||||
],
|
||||
districtOps: [
|
||||
{ label: 'อำเภอ1', value: '1' },
|
||||
{ label: 'อำเภอ2', value: '2' },
|
||||
],
|
||||
subDistrictOps: [
|
||||
{ label: 'ตำบล1', value: '1' },
|
||||
{ label: 'ตำบล2', value: '2' },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog full-width v-model="modal">
|
||||
<AppBox
|
||||
v-if="addressL && addressEng"
|
||||
style="padding: 0; border-radius: var(--radius-2)"
|
||||
>
|
||||
<!-- header -->
|
||||
<q-card-section class="form-header">
|
||||
<div class="row items-center justity-between">
|
||||
<div
|
||||
class="col text-subtitle1 text-weight-bold"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
>
|
||||
{{ title }}
|
||||
</div>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
class="close-btn"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- form-top -->
|
||||
<div class="form-body-top" :class="{ dark: $q.dark.isActive }">
|
||||
<q-card-section class="column col-12">
|
||||
<div class="row q-col-gutter-x-md">
|
||||
<slot name="top"></slot>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<!-- form-mid -->
|
||||
<div class="row" style="overflow-y: auto; max-height: 60vh">
|
||||
<!-- prepend -->
|
||||
<q-card-section
|
||||
class="column col-4"
|
||||
v-if="$slots.prepend && !$slots.append"
|
||||
>
|
||||
<slot name="prepend"></slot>
|
||||
</q-card-section>
|
||||
<!-- center -->
|
||||
<q-card-section
|
||||
class="column"
|
||||
:class="`${$slots.prepend ? 'col-8' : 'col-6'}`"
|
||||
>
|
||||
<div
|
||||
class="row inline col-12 q-col-gutter-x-md"
|
||||
style="row-gap: 16px"
|
||||
>
|
||||
<slot name="midTop"></slot>
|
||||
<div class="col-12">
|
||||
{{ addressLocaleTitle }}
|
||||
</div>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่"
|
||||
class="col-12"
|
||||
v-model="addressL.address"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressL.province"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="จังหวัด"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressL.district"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="อำเภอ"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressL.subDistrict"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="ตำบล"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="รหัสไปรษณีย์"
|
||||
class="col-3"
|
||||
v-model="addressL.zip"
|
||||
/>
|
||||
<span class="col-12">
|
||||
{{ addressEngTitle }}
|
||||
</span>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่"
|
||||
class="col-12"
|
||||
v-model="addressEng.address"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressEng.province"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="จังหวัด"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressEng.district"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="อำเภอ"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="addressEng.subDistrict"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="ตำบล"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="รหัสไปรษณีย์"
|
||||
class="col-3"
|
||||
v-model="addressEng.zip"
|
||||
/>
|
||||
<div class="col-12" v-if="$slots.midBottom">
|
||||
<q-separator size="1px" />
|
||||
</div>
|
||||
<slot name="midBottom"></slot>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<!-- append -->
|
||||
<q-card-section
|
||||
class="column col-6"
|
||||
v-if="$slots.append && !$slots.prepend"
|
||||
>
|
||||
<slot name="append"></slot>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<q-card-section class="form-footer">
|
||||
<div class="text-right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
class="q-px-sm"
|
||||
:label="$t('save')"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</AppBox>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.close-btn {
|
||||
color: hsl(var(--negative));
|
||||
background-color: hsla(var(--negative) / 0.1);
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--negative));
|
||||
}
|
||||
}
|
||||
|
||||
.form-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-body-top {
|
||||
--_body-bg: var(--sand-0);
|
||||
background-color: var(--_body-bg);
|
||||
|
||||
&.dark {
|
||||
--_body-bg: var(--gray-10);
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue