|
@ -1,12 +1,16 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-show="fieldMethodsClass.getShow(props, modelValue)" class="w-ext-radio"> |
|
|
<div v-show="fieldMethodsClass.getShow(props, modelValue)" class="w-ext-radio"> |
|
|
<w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label" :size="16" :light="lightLabelComputed"> |
|
|
<w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label" :size="16" :light="lightLabelComputed"> |
|
|
|
|
|
<template v-if="fieldMethodsClass.slotNames.length > 0" #addtion> |
|
|
|
|
|
<slot v-if="fieldMethodsClass.isTemplateSlot" name="addtion"></slot> |
|
|
|
|
|
<FormElementSlot v-else slot-name="addtion" :slot-content="props['slot']['addtion']"></FormElementSlot> |
|
|
|
|
|
</template> |
|
|
<template v-if="props.hideOptions" #after> |
|
|
<template v-if="props.hideOptions" #after> |
|
|
<q-btn |
|
|
<q-btn |
|
|
flat |
|
|
flat |
|
|
round |
|
|
round |
|
|
color="primary" |
|
|
color="primary" |
|
|
:icon="expandOptionsModelValue ? 'vertical_align_center' : 'expand'" |
|
|
:icon="expandOptionsModelValue ? 'remove' : 'add'" |
|
|
size="xs" |
|
|
size="xs" |
|
|
@click="expandOptionsModelValue = !expandOptionsModelValue" |
|
|
@click="expandOptionsModelValue = !expandOptionsModelValue" |
|
|
/> |
|
|
/> |
|
@ -21,6 +25,7 @@ |
|
|
:dense="props.dense" |
|
|
:dense="props.dense" |
|
|
:disable="fieldMethodsClass.getDisable(props, modelValue)" |
|
|
:disable="fieldMethodsClass.getDisable(props, modelValue)" |
|
|
:color="modelValue === opt['value'] ? selectedColor : undefined" |
|
|
:color="modelValue === opt['value'] ? selectedColor : undefined" |
|
|
|
|
|
:style="fieldMethodsClass.getReadOnly(props, modelValue) ? 'pointer-events: none;' : ''" |
|
|
> |
|
|
> |
|
|
<template #default> |
|
|
<template #default> |
|
|
<span v-if="modelValue === opt['value'] && selectedLabelColor" :style="'color:' + selectedLabelColor">{{ opt['label'] }}</span> |
|
|
<span v-if="modelValue === opt['value'] && selectedLabelColor" :style="'color:' + selectedLabelColor">{{ opt['label'] }}</span> |
|
@ -34,7 +39,7 @@ |
|
|
class="desc" |
|
|
class="desc" |
|
|
:rows="3" |
|
|
:rows="3" |
|
|
:required-if="opt['desc']['requiredIf']" |
|
|
:required-if="opt['desc']['requiredIf']" |
|
|
:read-only-if="fieldMethodsClass.getDisable(props, modelValue)" |
|
|
:read-only-if="fieldMethodsClass.getReadOnly(props, modelValue)" |
|
|
> |
|
|
> |
|
|
</w-textarea> |
|
|
</w-textarea> |
|
|
</template> |
|
|
</template> |
|
@ -42,12 +47,14 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { ref, useAttrs, computed, onMounted } from 'vue'; |
|
|
import { ref, useAttrs, computed, useSlots } from 'vue'; |
|
|
import { FormFieldProps } from '@/platform/components/form/FormField.ts'; |
|
|
import { FormFieldProps } from '@/platform/components/form/FormField.ts'; |
|
|
import { FormFieldMethods } from '../form/FormField'; |
|
|
import { FormFieldMethods } from '../form/FormField'; |
|
|
|
|
|
import FormElementSlot from '../form/FormElementSlot.vue'; |
|
|
|
|
|
|
|
|
const radioRef = ref(); |
|
|
const radioRef = ref(); |
|
|
const attrs = useAttrs(); |
|
|
const attrs = useAttrs(); |
|
|
|
|
|
const slots = useSlots(); |
|
|
const modelValue = defineModel<string | boolean | number>(); |
|
|
const modelValue = defineModel<string | boolean | number>(); |
|
|
const descModelValue = ref(''); |
|
|
const descModelValue = ref(''); |
|
|
const expandOptionsModelValue = ref(false); |
|
|
const expandOptionsModelValue = ref(false); |
|
@ -72,6 +79,8 @@ const props = withDefaults(defineProps<FieldProps>(), { |
|
|
lightNotHideOptionsLabel: false, |
|
|
lightNotHideOptionsLabel: false, |
|
|
}); |
|
|
}); |
|
|
class FieldMethods extends FormFieldMethods { |
|
|
class FieldMethods extends FormFieldMethods { |
|
|
|
|
|
isTemplateSlot = this.getSlotType(slots); |
|
|
|
|
|
slotNames = this.getSlotNames(slots, props); |
|
|
updateValue = (value_) => { |
|
|
updateValue = (value_) => { |
|
|
if (props['onUpdateValue']) { |
|
|
if (props['onUpdateValue']) { |
|
|
props['onUpdateValue']({ |
|
|
props['onUpdateValue']({ |
|
|