Arno Kaimbacher
f89b119b18
- Added the `allowEmailContact` property to the `CardBoxClient` component to display the email contact status. - Added the `allowEmailContact` computed property to the `Person` model to determine if email contact is allowed based on the related datasets. - Preloaded the datasets relation in the `AuthorsController` to access the pivot attributes. - Updated the `Dashboard.vue` to pass the `allowEmailContact` prop to the `CardBoxClient` component. - Updated the `array_contains_types` validation rule to correct the error message for descriptions. - Updated the `FormCheckRadio.vue` to correctly handle the radio button and checkbox components.
59 lines
2.4 KiB
Vue
59 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
name: string;
|
|
type?: 'checkbox' | 'radio' | 'switch';
|
|
label?: string | null;
|
|
modelValue: Array<any> | string | number | boolean | null;
|
|
inputValue: string | number | boolean;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: Props['modelValue']): void }>();
|
|
|
|
const computedValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', props.type === 'radio' ? [value] : value);
|
|
},
|
|
});
|
|
|
|
const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'));
|
|
|
|
// Define isChecked for radio inputs: it's true when the current modelValue equals the inputValue
|
|
const isChecked = computed(() => {
|
|
if (Array.isArray(computedValue.value) && computedValue.value.length > 0) {
|
|
return props.type === 'radio'
|
|
? computedValue.value[0] === props.inputValue
|
|
: computedValue.value.includes(props.inputValue);
|
|
}
|
|
return computedValue.value === props.inputValue;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<label v-if="type === 'radio'" :class="[type]"
|
|
class="mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative">
|
|
<input v-model="computedValue" :type="inputType" :name="name" :value="inputValue"
|
|
class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0"
|
|
:checked="isChecked" />
|
|
<span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded-full" :class="{
|
|
'border-gray-700': !isChecked,
|
|
'bg-radio-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
|
|
}" />
|
|
<span class="pl-2 control-label">{{ label }}</span>
|
|
</label>
|
|
|
|
<label v-else-if="type === 'checkbox'" :class="[type]"
|
|
class="mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative">
|
|
<input v-model="computedValue" :type="inputType" :name="name" :value="inputValue"
|
|
class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0" />
|
|
<span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded" :class="{
|
|
'border-gray-700': !isChecked,
|
|
'bg-checkbox-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
|
|
}" />
|
|
<span class="pl-2 control-label">{{ label }}</span>
|
|
</label>
|
|
</template>
|