Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 4x 4x 4x 4x | <template>
<Accordion
class="form-accordion margin-bottom-s"
:active-index="accordionIndex"
>
<AccordionTab header="USER">
<div class="form-field margin-bottom-xs">
<label class="form-label">International User</label>
<div class="button-group">
<Button
v-for="option in BUTTON_GROUP_OPTIONS.iShip"
:key="option.value"
:variant="formData.iShip === option.value ? 'primary' : 'secondary'"
class="button-group-item"
@click="$emit('update:field', 'iShip', option.value)"
>
{{ option.label }}
</Button>
</div>
</div>
<div class="form-field margin-bottom-xs">
<label class="form-label">Signed-In User</label>
<div class="button-group">
<Button
v-for="option in BUTTON_GROUP_OPTIONS.signedIn"
:key="option.value"
:variant="
formData.signedIn === option.value ? 'primary' : 'secondary'
"
class="button-group-item"
@click="$emit('update:field', 'signedIn', option.value)"
>
{{ option.label }}
</Button>
</div>
</div>
<div class="form-field margin-bottom-xs">
<label class="form-label">Choose New Vs Return</label>
<div class="button-group">
<Button
v-for="option in BUTTON_GROUP_OPTIONS.userType"
:key="option.value"
:variant="
formData.userType === option.value ? 'primary' : 'secondary'
"
class="button-group-item"
@click="$emit('update:field', 'userType', option.value)"
>
{{ option.label }}
</Button>
</div>
</div>
</AccordionTab>
</Accordion>
</template>
<script setup>
import { Accordion, AccordionTab } from '@atomic-ui/accordion';
import Button from '@atomic-ui/button';
import { computed } from 'vue';
import { BUTTON_GROUP_OPTIONS } from '../../constants/targetConstants';
const props = defineProps({
formData: { type: Object, required: true },
});
defineEmits(['update:field']);
const accordionIndex = computed(() => {
const fd = props.formData;
const hasValues = fd.iShip !== null || fd.signedIn !== null || fd.userType;
return hasValues ? 0 : null;
});
</script>
<style scoped lang="scss">
@import './_target-form-styles.scss';
</style>
|