672 lines
24 KiB
Vue
672 lines
24 KiB
Vue
<template>
|
|
<div class="container mx-auto px-4 py-6">
|
|
<p class="text-lg font-bold mb-4">{{ caseInstance.caseName }}</p>
|
|
|
|
<div v-if="loading" class="text-blue-500">Loading...</div>
|
|
<div v-if="error" class="text-red-500">{{ error }}</div>
|
|
|
|
<div v-if="forms.length > 0">
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-gray-200 mb-6">
|
|
<nav class="flex -mb-px">
|
|
<button
|
|
v-for="(form, index) in forms"
|
|
:key="index"
|
|
@click="activeTabIndex = index"
|
|
class="py-4 px-6 font-medium text-sm border-b-2 whitespace-nowrap"
|
|
:class="[
|
|
activeTabIndex === index
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
]"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-2"
|
|
:class="{ 'bg-primary text-white': activeTabIndex === index }">
|
|
{{ index + 1 }}
|
|
</div>
|
|
<div class="flex items-center">
|
|
{{ form.formName || `Form ${index + 1}` }}
|
|
<!-- Access indicator -->
|
|
<div v-if="!form.hasEditAccess" class="ml-2">
|
|
<div class="w-4 h-4 rounded-full bg-yellow-100 flex items-center justify-center"
|
|
title="Read-only access">
|
|
<svg class="w-3 h-3 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div v-for="(form, index) in forms" :key="`content-${index}`" v-show="activeTabIndex === index">
|
|
<!-- Form Header with Access Status -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-xl font-semibold">{{ form.formName || `Form ${index + 1}` }}</h2>
|
|
<!-- Access Status Badge -->
|
|
<div v-if="!form.hasEditAccess" class="flex items-center">
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 border border-yellow-200">
|
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
Read-only Access
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex items-center">
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 border border-green-200">
|
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
Edit Access
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-1">{{ form.description || 'Please complete this form step' }}</p>
|
|
|
|
<!-- Access Information -->
|
|
<div v-if="!form.hasEditAccess" class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-yellow-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<p class="text-sm font-medium text-yellow-800">Read-only Access</p>
|
|
<p class="text-sm text-yellow-700 mt-1">
|
|
You can view this form but cannot make changes.
|
|
<span v-if="form.accessReason === 'user_not_assigned'">This form is assigned to specific users.</span>
|
|
<span v-else-if="form.accessReason === 'role_not_assigned'">This form is assigned to specific roles.</span>
|
|
<span v-else>You don't have permission to edit this form.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conditional Logic Engine -->
|
|
<ConditionalLogicEngine
|
|
:form-components="form.formComponents"
|
|
:form-data="formData[index]"
|
|
@script-generated="handleScriptGenerated"
|
|
/>
|
|
|
|
<!-- Form content -->
|
|
<FormKit
|
|
type="form"
|
|
:id="`form-${form.formID}`"
|
|
v-model="formData[index]"
|
|
@submit="handleSubmit(index)"
|
|
:actions="false"
|
|
:incomplete-message="false"
|
|
validation-visibility="submit"
|
|
:disabled="!form.hasEditAccess"
|
|
>
|
|
<div class="grid-preview-container">
|
|
<template v-if="form.formComponents && form.formComponents.length > 0">
|
|
<div
|
|
v-for="(component, compIndex) in form.formComponents"
|
|
:key="`component-${compIndex}`"
|
|
:style="{
|
|
gridColumn: component.props?.gridColumn || 'span 12'
|
|
}"
|
|
>
|
|
<!-- Standard FormKit inputs -->
|
|
<FormKit
|
|
v-if="isStandardInput(component.type)"
|
|
:type="component.type"
|
|
:name="component.props?.name"
|
|
:label="component.props?.label"
|
|
:help="component.props?.help"
|
|
:placeholder="component.props?.placeholder"
|
|
:validation="component.props?.validation"
|
|
:options="component.props?.options"
|
|
:value="component.props?.value"
|
|
:class="component.props?.width ? `w-${component.props.width}` : 'w-full'"
|
|
class="mb-4"
|
|
:disabled="!form.hasEditAccess"
|
|
:readonly="!form.hasEditAccess"
|
|
/>
|
|
|
|
<!-- Heading -->
|
|
<div v-else-if="component.type === 'heading'" class="py-2 mb-4">
|
|
<component
|
|
:is="`h${component.props?.level || 2}`"
|
|
class="font-semibold"
|
|
:class="{
|
|
'text-2xl': component.props?.level === 2,
|
|
'text-xl': component.props?.level === 3,
|
|
'text-lg': component.props?.level === 4
|
|
}"
|
|
>
|
|
{{ component.props?.value || 'Heading Text' }}
|
|
</component>
|
|
</div>
|
|
|
|
<!-- Paragraph -->
|
|
<div v-else-if="component.type === 'paragraph'" class="py-2 mb-4">
|
|
<p class="text-gray-600">{{ component.props?.value || 'Paragraph text goes here' }}</p>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div v-else-if="component.type === 'divider'" class="py-2 mb-4">
|
|
<hr class="border-t border-gray-200">
|
|
</div>
|
|
|
|
<!-- Info Display -->
|
|
<div v-else-if="component.type === 'info-display'" class="mb-4">
|
|
<div
|
|
class="p-4 rounded-lg"
|
|
:class="{ 'border': component.props?.showBorder }"
|
|
:style="{ backgroundColor: component.props?.backgroundColor || '#f8fafc' }"
|
|
>
|
|
<h3 class="font-medium mb-2">{{ component.props?.title || 'Information' }}</h3>
|
|
<div
|
|
:class="{
|
|
'grid grid-cols-2 gap-4': component.props?.layout === 'grid',
|
|
'flex flex-col space-y-2': component.props?.layout === 'vertical' || !component.props?.layout,
|
|
'flex flex-row flex-wrap gap-4': component.props?.layout === 'horizontal'
|
|
}"
|
|
>
|
|
<div
|
|
v-for="(field, fieldIndex) in component.props?.fields"
|
|
:key="`field-${fieldIndex}`"
|
|
class="text-sm"
|
|
>
|
|
<span class="text-gray-600">{{ field.label }}:</span>
|
|
<span class="ml-2 font-medium">{{ field.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div v-else-if="component.type === 'button'" class="py-2 mb-4">
|
|
<RsButton
|
|
:type="component.props?.buttonType || 'button'"
|
|
:variant="component.props?.variant || 'primary'"
|
|
:size="component.props?.size || 'md'"
|
|
:disabled="component.props?.disabled || !form.hasEditAccess"
|
|
>
|
|
{{ component.props?.label || 'Button' }}
|
|
</RsButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-else class="text-center py-8 text-gray-500">
|
|
No form components found.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit button if not already included in the form -->
|
|
<!-- <FormKit
|
|
v-if="!hasSubmitButton(form)"
|
|
type="submit"
|
|
label="Submit"
|
|
:disabled="submitting || !form.hasEditAccess"
|
|
:classes="{
|
|
input: submitting ? 'opacity-75 cursor-wait' : ''
|
|
}"
|
|
class="mt-6"
|
|
/> -->
|
|
<div v-if="submitting" class="text-center mt-2 text-sm text-blue-500">
|
|
Submitting form...
|
|
</div>
|
|
</FormKit>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="flex justify-between mt-6">
|
|
<button
|
|
@click="prevStep"
|
|
class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
:disabled="activeTabIndex === 0"
|
|
:class="{ 'opacity-50 cursor-not-allowed': activeTabIndex === 0 }"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
@click="nextStep"
|
|
class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark"
|
|
:disabled="activeTabIndex === forms.length - 1"
|
|
:class="{ 'opacity-50 cursor-not-allowed': activeTabIndex === forms.length - 1 }"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="!loading && !error">
|
|
<p class="text-gray-500">No forms available.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, computed, watch, nextTick } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import RsButton from '~/components/RsButton.vue'
|
|
import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue'
|
|
|
|
const loading = ref(false)
|
|
const error = ref(null)
|
|
const route = useRoute()
|
|
const forms = ref([])
|
|
const caseInstance = ref([])
|
|
const activeTabIndex = ref(0)
|
|
const formData = ref([])
|
|
const submitting = ref(false)
|
|
|
|
// Computed property for current form
|
|
const currentForm = computed(() => {
|
|
return forms.value[activeTabIndex.value] || null
|
|
})
|
|
|
|
// Navigation methods
|
|
const nextStep = () => {
|
|
if (activeTabIndex.value < forms.value.length - 1) {
|
|
activeTabIndex.value++
|
|
}
|
|
}
|
|
|
|
const prevStep = () => {
|
|
if (activeTabIndex.value > 0) {
|
|
activeTabIndex.value--
|
|
}
|
|
}
|
|
|
|
// Check if component type is a standard FormKit input
|
|
const isStandardInput = (type) => {
|
|
const standardInputs = [
|
|
'text', 'email', 'password', 'number', 'tel', 'url',
|
|
'textarea', 'select', 'checkbox', 'radio', 'date',
|
|
'time', 'datetime-local', 'file', 'color', 'range',
|
|
'otp', 'mask', 'dropzone', 'switch'
|
|
]
|
|
return standardInputs.includes(type)
|
|
}
|
|
|
|
// Check if form has a submit button component
|
|
const hasSubmitButton = (form) => {
|
|
if (!form.formComponents) return false
|
|
return form.formComponents.some(comp =>
|
|
comp.type === 'button' &&
|
|
comp.props?.buttonType === 'submit'
|
|
)
|
|
}
|
|
|
|
// Utility functions for conditional logic
|
|
const getField = (fieldName) => {
|
|
const currentFormData = formData.value[activeTabIndex.value] || {}
|
|
return currentFormData[fieldName]
|
|
}
|
|
|
|
const showField = (fieldName) => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly
|
|
|
|
const field = document.querySelector(`[name="${fieldName}"]`)
|
|
if (field) {
|
|
const outerDiv = field.closest('.formkit-outer')
|
|
if (outerDiv) {
|
|
outerDiv.style.display = ''
|
|
outerDiv.classList.remove('hidden')
|
|
}
|
|
}
|
|
}
|
|
|
|
const hideField = (fieldName) => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly
|
|
|
|
const field = document.querySelector(`[name="${fieldName}"]`)
|
|
if (field) {
|
|
const outerDiv = field.closest('.formkit-outer')
|
|
if (outerDiv) {
|
|
outerDiv.style.display = 'none'
|
|
outerDiv.classList.add('hidden')
|
|
}
|
|
}
|
|
}
|
|
|
|
const enableField = (fieldName) => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly
|
|
|
|
const field = document.querySelector(`[name="${fieldName}"]`)
|
|
if (field) {
|
|
field.removeAttribute('disabled')
|
|
const outerDiv = field.closest('.formkit-outer')
|
|
if (outerDiv) {
|
|
outerDiv.classList.remove('opacity-50', 'pointer-events-none')
|
|
}
|
|
}
|
|
}
|
|
|
|
const disableField = (fieldName) => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly
|
|
|
|
const field = document.querySelector(`[name="${fieldName}"]`)
|
|
if (field) {
|
|
field.setAttribute('disabled', 'disabled')
|
|
const outerDiv = field.closest('.formkit-outer')
|
|
if (outerDiv) {
|
|
outerDiv.classList.add('opacity-50', 'pointer-events-none')
|
|
}
|
|
}
|
|
}
|
|
|
|
const onFieldChange = (fieldName, callback) => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't add listeners if readonly
|
|
|
|
const field = document.querySelector(`[name="${fieldName}"]`)
|
|
if (field) {
|
|
// Remove existing listeners first to prevent duplicates
|
|
field.removeEventListener('change', callback)
|
|
field.removeEventListener('input', callback)
|
|
// Add new listeners
|
|
field.addEventListener('change', callback)
|
|
field.addEventListener('input', callback)
|
|
}
|
|
}
|
|
|
|
// Function to evaluate and apply conditional logic for all fields
|
|
const evaluateAllFieldConditions = () => {
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.formComponents) return
|
|
|
|
// Don't apply conditional logic if user doesn't have edit access
|
|
if (!currentForm.hasEditAccess) return
|
|
|
|
currentForm.formComponents.forEach(component => {
|
|
if (component.props?.conditionalLogic?.enabled) {
|
|
const { conditions, action, operator = 'and' } = component.props.conditionalLogic
|
|
const fieldName = component.props.name
|
|
|
|
// Evaluate all conditions
|
|
const results = conditions.map(condition => {
|
|
const fieldValue = getField(condition.field)
|
|
|
|
switch (condition.operator) {
|
|
case 'equals':
|
|
return fieldValue === condition.value
|
|
case 'not_equals':
|
|
return fieldValue !== condition.value
|
|
case 'contains':
|
|
return String(fieldValue || '').includes(condition.value)
|
|
case 'not_contains':
|
|
return !String(fieldValue || '').includes(condition.value)
|
|
case 'is_empty':
|
|
return !fieldValue || fieldValue === ''
|
|
case 'is_not_empty':
|
|
return fieldValue && fieldValue !== ''
|
|
case 'greater_than':
|
|
return Number(fieldValue) > Number(condition.value)
|
|
case 'less_than':
|
|
return Number(fieldValue) < Number(condition.value)
|
|
default:
|
|
return false
|
|
}
|
|
})
|
|
|
|
// Check if conditions are met based on operator
|
|
const conditionsMet = operator === 'and'
|
|
? results.every(result => result)
|
|
: results.some(result => result)
|
|
|
|
// Apply visibility/state based on conditions
|
|
if (conditionsMet) {
|
|
if (action === 'show') showField(fieldName)
|
|
else if (action === 'hide') hideField(fieldName)
|
|
else if (action === 'enable') enableField(fieldName)
|
|
else if (action === 'disable') disableField(fieldName)
|
|
} else {
|
|
if (action === 'show') hideField(fieldName)
|
|
else if (action === 'hide') showField(fieldName)
|
|
else if (action === 'enable') disableField(fieldName)
|
|
else if (action === 'disable') enableField(fieldName)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Watch for form data changes to re-evaluate conditional logic
|
|
watch(() => formData.value[activeTabIndex.value], () => {
|
|
nextTick(() => {
|
|
evaluateAllFieldConditions()
|
|
})
|
|
}, { deep: true })
|
|
|
|
// Watch for active tab changes to re-evaluate conditional logic
|
|
watch(activeTabIndex, () => {
|
|
nextTick(() => {
|
|
evaluateAllFieldConditions()
|
|
})
|
|
})
|
|
|
|
// Watch for forms data to initialize conditional logic
|
|
watch(forms, (newForms) => {
|
|
if (newForms.length > 0) {
|
|
nextTick(() => {
|
|
evaluateAllFieldConditions()
|
|
})
|
|
}
|
|
}, { immediate: true })
|
|
|
|
// Handle script generated from ConditionalLogicEngine
|
|
const handleScriptGenerated = (script) => {
|
|
if (!script) return
|
|
|
|
const currentForm = forms.value[activeTabIndex.value]
|
|
if (!currentForm?.hasEditAccess) return // Don't execute scripts if readonly
|
|
|
|
try {
|
|
// Create a function with access to our utility functions
|
|
const evalScript = new Function(
|
|
'getField',
|
|
'showField',
|
|
'hideField',
|
|
'enableField',
|
|
'disableField',
|
|
'onFieldChange',
|
|
script
|
|
)
|
|
|
|
// Execute the script with our utility functions
|
|
evalScript(
|
|
getField,
|
|
showField,
|
|
hideField,
|
|
enableField,
|
|
disableField,
|
|
onFieldChange
|
|
)
|
|
} catch (err) {
|
|
console.error('Error executing conditional logic script:', err)
|
|
}
|
|
}
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (formIndex) => {
|
|
try {
|
|
// Check if user has edit access to this form
|
|
const currentForm = forms.value[formIndex];
|
|
if (!currentForm.hasEditAccess) {
|
|
error.value = 'You do not have permission to submit this form';
|
|
return;
|
|
}
|
|
|
|
submitting.value = true
|
|
console.log(`Form ${formIndex + 1} submitted:`, formData.value[formIndex])
|
|
|
|
// Example submission logic - replace with your actual API endpoint
|
|
const response = await $fetch(`/api/cases/${route.params.id}/forms/${forms.value[formIndex].formID}/submit`, {
|
|
method: 'POST',
|
|
body: {
|
|
formData: formData.value[formIndex]
|
|
}
|
|
})
|
|
|
|
if (response.success) {
|
|
// Move to next form if available
|
|
if (formIndex < forms.value.length - 1) {
|
|
activeTabIndex.value = formIndex + 1
|
|
}
|
|
} else {
|
|
throw new Error(response.error || 'Form submission failed')
|
|
}
|
|
} catch (err) {
|
|
console.error('Error submitting form:', err)
|
|
error.value = err.message || 'Failed to submit form'
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
// Methods
|
|
const fetchCaseInstance = async (caseId) => {
|
|
try {
|
|
loading.value = true;
|
|
error.value = null;
|
|
|
|
// Fetch case instance and all related forms using the API endpoint
|
|
const response = await $fetch(`/api/cases/${caseId}/forms`);
|
|
if (!response.success) {
|
|
throw new Error(response.error || 'Failed to load case instance and forms');
|
|
} else {
|
|
caseInstance.value = response.caseInstance
|
|
forms.value = response.forms
|
|
console.log(response.forms)
|
|
|
|
// Initialize formData array with default values for each form
|
|
formData.value = forms.value.map(form => {
|
|
const defaultData = {};
|
|
|
|
// Set default values for form fields
|
|
form.formComponents?.forEach(component => {
|
|
// For select fields with options, set first option as default
|
|
if (component.type === 'select' && component.props.options?.length > 0) {
|
|
defaultData[component.props.name] = component.props.options[0].value;
|
|
}
|
|
// Add more default value logic for other field types if needed
|
|
});
|
|
|
|
return defaultData;
|
|
});
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Error fetching case instance and forms:', err);
|
|
error.value = err.message || 'Failed to load forms';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Lifecycle hooks
|
|
onMounted(() => {
|
|
const caseId = route.params.id;
|
|
if (caseId) {
|
|
fetchCaseInstance(caseId);
|
|
} else {
|
|
error.value = 'No case ID provided';
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.grid-preview-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.grid-preview-container > div {
|
|
grid-column: span 9;
|
|
}
|
|
|
|
/* Apply width classes */
|
|
.w-25 { width: 25%; }
|
|
.w-33 { width: 33.333%; }
|
|
.w-50 { width: 50%; }
|
|
.w-66 { width: 66.666%; }
|
|
.w-75 { width: 75%; }
|
|
.w-100 { width: 100%; }
|
|
|
|
/* Match form-builder styling */
|
|
:deep(.formkit-outer) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
:deep(.formkit-label) {
|
|
font-weight: 500;
|
|
color: #374151;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
:deep(.formkit-input) {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.375rem;
|
|
background-color: #fff;
|
|
color: #1f2937;
|
|
}
|
|
|
|
:deep(.formkit-input:focus) {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 1px #3b82f6;
|
|
}
|
|
|
|
:deep(.formkit-help) {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Readonly form styling */
|
|
:deep(.formkit-form[disabled]) {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:deep(.formkit-form[disabled] .formkit-input) {
|
|
background-color: #f9fafb;
|
|
border-color: #e5e7eb;
|
|
color: #6b7280;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
:deep(.formkit-form[disabled] .formkit-label) {
|
|
color: #6b7280;
|
|
}
|
|
|
|
:deep(.formkit-form[disabled] .formkit-help) {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* Readonly input styling */
|
|
:deep(.formkit-input[readonly]) {
|
|
background-color: #f9fafb;
|
|
border-color: #e5e7eb;
|
|
color: #6b7280;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
:deep(.formkit-input[disabled]) {
|
|
background-color: #f9fafb;
|
|
border-color: #e5e7eb;
|
|
color: #6b7280;
|
|
cursor: not-allowed;
|
|
}
|
|
</style> |