Afiq
f86fe87fc5
- Updated ComponentPreview.vue to include support for the 'searchSelect' and 'switch' components in readonly states, ensuring consistent behavior across form fields. - Modified FormBuilderComponents.vue to set default readonly properties for various components, enhancing usability and preventing unintended edits. - Enhanced FormBuilderFieldSettingsModal.vue to reflect the updated readonly logic for component types, improving user awareness of field capabilities. - Introduced a new modal in manage.vue for copying workflow links, allowing users to select between direct and iframe link types with customizable options. - Improved link generation logic to support iframe parameters, enhancing the flexibility of sharing workflows. - Updated styles in SearchSelect.vue and Switch.vue to visually indicate readonly states, ensuring a consistent user experience across components.
117 lines
2.5 KiB
Vue
117 lines
2.5 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-input:disabled + .switch-label {
|
|
@apply 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;
|
|
}
|
|
|
|
.switch-input:disabled + .switch-label {
|
|
@apply cursor-not-allowed;
|
|
}
|
|
|
|
/* Additional readonly styling */
|
|
.switch-label.cursor-not-allowed {
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
.switch-label.cursor-not-allowed .switch-track {
|
|
opacity: 0.8;
|
|
background-color: #f3f4f6;
|
|
}
|
|
</style> |