37 lines
1.5 KiB
Vue
37 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ResumeInputData } from '@/types/resume';
|
|
import { defineAsyncComponent } from 'vue';
|
|
import Label from '../ui/label/Label.vue';
|
|
|
|
const props = defineProps<{
|
|
model: ResumeInputData
|
|
}>();
|
|
|
|
const componentFile = defineAsyncComponent(
|
|
() => import(
|
|
/* @vite-ignore */
|
|
`./resumeComponentsFormInput/${props.model.component_input.data_type.vue_component_name}`
|
|
)
|
|
);
|
|
|
|
const emit = defineEmits(['data-changed']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<Label>{{ props.model.component_input?.label }}</Label>
|
|
<component
|
|
class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
|
|
dark:bg-primary/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-primary px-3 py-1 text-base shadow-xs
|
|
transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-primary file:text-sm
|
|
file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
|
|
focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
|
|
aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
:name="props.model.component_input?.name"
|
|
:is="componentFile"
|
|
:model="props.model"
|
|
@data-changed="emit('data-changed', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|