154 lines
4.2 KiB
Vue
154 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
const telephoneNo = defineModel<string>('telephoneNo');
|
|
const contact = defineModel<string>('contact');
|
|
const email = defineModel<string>('email');
|
|
const contactName = defineModel<string>('contactName');
|
|
const webUrl = defineModel<string>('webUrl');
|
|
// const operatingHours = defineModel<string>('operatingHours');
|
|
const lineId = defineModel<string>('lineId');
|
|
const typeBranch = defineModel<string>('typeBranch');
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="row col-12">
|
|
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-xs"
|
|
color="info"
|
|
name="mdi-phone-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
{{ $t(`${title}`) }}
|
|
</div>
|
|
|
|
<div class="col-12 row q-col-gutter-sm">
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-12 col-md-4"
|
|
:label="$t('form.email')"
|
|
:rules="
|
|
readonly
|
|
? undefined
|
|
: [
|
|
(v: string) =>
|
|
!v ||
|
|
/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
|
|
$t('form.error.invalid'),
|
|
]
|
|
"
|
|
for="input-email"
|
|
:model-value="readonly ? email || '-' : email"
|
|
@update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
|
|
>
|
|
<template #prepend>
|
|
<q-icon
|
|
color="primary"
|
|
name="mdi-email-outline"
|
|
size="xs"
|
|
class="q-mr-xs"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6 col-md-4"
|
|
:label="$t('form.telephone')"
|
|
for="input-telephone-no"
|
|
:model-value="readonly ? telephoneNo || '-' : telephoneNo"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (telephoneNo = v) : '')
|
|
"
|
|
>
|
|
<template #prepend>
|
|
<q-icon
|
|
color="primary"
|
|
name="mdi-phone-outline"
|
|
size="xs"
|
|
class="q-mr-xs"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6 col-md-4"
|
|
label="Line ID"
|
|
for="input-line-id"
|
|
:model-value="readonly ? lineId || '-' : lineId"
|
|
@update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
|
|
/>
|
|
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6 col-md-4"
|
|
:label="$t('branch.form.contactName')"
|
|
for="input-contact-name"
|
|
:model-value="readonly ? contactName || '-' : contactName"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (contactName = v) : '')
|
|
"
|
|
/>
|
|
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6 col-md-4"
|
|
:label="$t('branch.form.contactTelephone')"
|
|
for="input-contact"
|
|
:model-value="readonly ? contact || '-' : contact"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (contact = v) : '')
|
|
"
|
|
>
|
|
<template #prepend>
|
|
<q-icon
|
|
color="primary"
|
|
name="mdi-phone-outline"
|
|
size="xs"
|
|
class="q-mr-xs"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-input
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6 col-md-4"
|
|
:label="$t('branch.form.webUrl')"
|
|
for="input-web-url"
|
|
:model-value="readonly ? webUrl || '-' : webUrl"
|
|
@update:model-value="(v) => (typeof v === 'string' ? (webUrl = v) : '')"
|
|
>
|
|
<template #prepend>
|
|
<q-icon color="primary" name="mdi-web" size="xs" class="q-mr-xs" />
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
</div>
|
|
</template>
|