Afiq
415ac5a0d1
- Updated ComponentPreview.vue to implement a draggable container for nested components, allowing users to reorder fields within repeating groups. - Enhanced the user interface with visual feedback during drag-and-drop actions, improving usability and interaction. - Modified FormBuilderComponents.vue to include default properties for nested components, facilitating better organization and management of form fields. - Improved FormBuilderFieldSettingsModal.vue to provide clearer information about repeating group containers and their functionalities. - Refactored event handling for component updates and deletions to support nested components within sections and repeating groups, ensuring consistent data management. - Updated styles across components to enhance the visual experience during drag-and-drop operations and improve overall aesthetics.
103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
context: Object,
|
|
});
|
|
|
|
function handleChange(event) {
|
|
// Don't allow changes if readonly
|
|
if (props.context.readonly) {
|
|
return;
|
|
}
|
|
props.context.node.input(event.target.checked);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="switch-container">
|
|
<div class="switch-wrapper">
|
|
<input
|
|
:id="context.id"
|
|
:name="context.name"
|
|
type="checkbox"
|
|
:checked="context.value"
|
|
:disabled="context.disabled || context.readonly"
|
|
@change="handleChange"
|
|
class="switch-input"
|
|
/>
|
|
<label :for="context.id" class="switch-label" :class="{ 'cursor-not-allowed': context.readonly }">
|
|
<span class="switch-track">
|
|
<span class="switch-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.switch-container {
|
|
@apply flex items-center justify-start;
|
|
}
|
|
|
|
.switch-wrapper {
|
|
@apply relative;
|
|
}
|
|
|
|
.switch-input {
|
|
@apply sr-only;
|
|
}
|
|
|
|
.switch-label {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.switch-track {
|
|
@apply relative inline-block w-11 h-6 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out;
|
|
}
|
|
|
|
.switch-input:checked + .switch-label .switch-track {
|
|
@apply bg-blue-600;
|
|
}
|
|
|
|
.switch-input:disabled + .switch-label .switch-track {
|
|
@apply opacity-50;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.switch-thumb {
|
|
@apply absolute top-[2px] left-[2px] w-5 h-5 bg-white border border-gray-300 rounded-full transition-transform duration-200 ease-in-out;
|
|
}
|
|
|
|
.switch-input:checked + .switch-label .switch-thumb {
|
|
@apply transform translate-x-5 border-white;
|
|
}
|
|
|
|
.switch-input:focus + .switch-label .switch-track {
|
|
@apply ring-4 ring-blue-300 ring-opacity-50;
|
|
}
|
|
|
|
/* Mac-specific fixes */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.switch-track,
|
|
.switch-thumb {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Force hardware acceleration on Mac for smoother animations */
|
|
.switch-thumb {
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
.switch-input:checked + .switch-label .switch-thumb {
|
|
transform: translateX(1.25rem) translateZ(0);
|
|
}
|
|
|
|
/* Readonly styles for Switch */
|
|
.switch-input:disabled + .switch-label .switch-track {
|
|
@apply opacity-50;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
|
|
</style> |