54 lines
2.1 KiB
Vue
54 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import type { SectionData } from "@imen/shared";
|
|||
|
|
import FormField from "@/components/FormField.vue";
|
|||
|
|
|
|||
|
|
/** Shared address / phone / email / hours fields from the settings section. */
|
|||
|
|
const data = defineModel<SectionData<"settings">>({ required: true });
|
|||
|
|
|
|||
|
|
const props = withDefaults(
|
|||
|
|
defineProps<{
|
|||
|
|
/** Zod path prefix when nested under another form context */
|
|||
|
|
pathPrefix?: string;
|
|||
|
|
}>(),
|
|||
|
|
{ pathPrefix: "" },
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function path(field: string) {
|
|||
|
|
return props.pathPrefix ? `${props.pathPrefix}.${field}` : field;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="grid gap-x-4 md:grid-cols-2">
|
|||
|
|
<FormField :path="path('phoneDisplay')" label="تلفن (نمایشی)" required>
|
|||
|
|
<a-input v-model:value="data.phoneDisplay" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('phone')" label="تلفن (برای لینک و گوگل)" hint="با کد کشور، مثلاً +98-21-91008800" required>
|
|||
|
|
<a-input v-model:value="data.phone" class="ltr-input" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('email')" label="ایمیل" required class="md:col-span-2">
|
|||
|
|
<a-input v-model:value="data.email" class="ltr-input" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('address.locality')" label="شهر" required>
|
|||
|
|
<a-input v-model:value="data.address.locality" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('address.country')" label="کد کشور" required>
|
|||
|
|
<a-input v-model:value="data.address.country" class="ltr-input" :maxlength="2" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('address.street')" label="نشانی" required class="md:col-span-2">
|
|||
|
|
<a-input v-model:value="data.address.street" />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField
|
|||
|
|
:path="path('mapUrl')"
|
|||
|
|
label="لینک نقشه"
|
|||
|
|
hint="اختیاری — لینک گوگلمپ، نشان و …"
|
|||
|
|
class="md:col-span-2"
|
|||
|
|
>
|
|||
|
|
<a-input v-model:value="data.mapUrl" class="ltr-input" placeholder="https://maps.google.com/..." />
|
|||
|
|
</FormField>
|
|||
|
|
<FormField :path="path('workingHours')" label="ساعات کاری (متن نمایشی)" required class="md:col-span-2">
|
|||
|
|
<a-input v-model:value="data.workingHours" />
|
|||
|
|
</FormField>
|
|||
|
|
</div>
|
|||
|
|
</template>
|