Nikita Kiselev
3cc82e45f0
Some checks are pending
Telegram Mini App Shop Builder / Compute version metadata (push) Waiting to run
Telegram Mini App Shop Builder / Run Frontend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run Backend tests (push) Waiting to run
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Waiting to run
Telegram Mini App Shop Builder / Build module. (push) Blocked by required conditions
Telegram Mini App Shop Builder / release (push) Blocked by required conditions
58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<div class="tw:flex tw:justify-center tw:items-start tw:p-8">
|
|
<!-- Phone Mockup -->
|
|
<div class="tw:relative tw:inline-grid tw:justify-items-center tw:bg-black tw:border-[2.5px] tw:border-gray-600 tw:rounded-[32.5px] tw:p-[3px] tw:overflow-hidden tw:w-full tw:max-w-[280px]" style="aspect-ratio: 462/978;">
|
|
<!-- Camera -->
|
|
<div class="tw:absolute tw:top-[3%] tw:left-1/2 tw:-translate-x-1/2 tw:z-10 tw:bg-black tw:rounded-[8.5px] tw:w-[28%] tw:h-[3.7%]"></div>
|
|
|
|
<!-- Display -->
|
|
<div class="tw:relative tw:rounded-[27px] tw:w-full tw:h-full tw:overflow-hidden tw:bg-gray-100">
|
|
<div class="tw:pt-15 tw:px-2 tw:pb-2 tw:overflow-y-auto tw:max-h-full tw:h-full">
|
|
<FormKit
|
|
type="form"
|
|
@submit="handleSubmit"
|
|
:submit-label="submitLabel"
|
|
outer-class="tw:space-y-4"
|
|
v-model="form"
|
|
>
|
|
<FormKitSchema :schema="schema" :data="data"/>
|
|
</FormKit>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { FormKit, FormKitSchema } from '@formkit/vue';
|
|
import {reactive, ref} from "vue";
|
|
|
|
const form = ref({});
|
|
const data = reactive(form);
|
|
|
|
const props = defineProps({
|
|
schema: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
},
|
|
submitLabel: {
|
|
type: String,
|
|
default: 'Отправить',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['submit']);
|
|
|
|
function handleSubmit(data) {
|
|
emit('submit', data);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep(ul.formkit-messages) {
|
|
margin-bottom: 0;
|
|
padding-left: 0;
|
|
}
|
|
</style>
|