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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 4x 4x 4x 4x 4x 4x | <template>
<Accordion
class="form-accordion margin-bottom-s"
:active-index="accordionIndex"
>
<AccordionTab header="DEVICE CHARACTERISTICS">
<small
class="field-hint accordion-hint"
>Leave blank unless you have a specific target</small>
<MultiSelectWithChips
:model-value="formData.akamaiDevice"
:options="DEVICE_TYPES"
label="Device Type"
placeholder="Search device types..."
name="akamaiDevice"
:show-count="true"
:allow-clear-all="true"
@update:model-value="$emit('update:field', 'akamaiDevice', $event)"
/>
<MultiSelectWithChips
:model-value="formData.platform"
:options="PLATFORM_TYPES"
label="OS Type"
placeholder="Search OS types..."
name="platform"
:show-count="true"
:allow-clear-all="true"
class="margin-top-s"
@update:model-value="$emit('update:field', 'platform', $event)"
/>
<div class="form-field margin-bottom-xs">
<label class="form-label">Choose Size Type</label>
<Radio
:model-value="formData.sizeType"
:options="SIZE_TYPES"
name="sizeType"
spacing="margin-bottom-xs"
@update:model-value="$emit('update:field', 'sizeType', $event)"
/>
</div>
<div
v-if="formData.sizeType === 'list'"
class="form-field margin-bottom-xs"
>
<label class="form-label">Device Size</label>
<InputText
:model-value="formData.size"
name="size"
type="number"
label="Enter device size"
@update:model-value="$emit('update:field', 'size', $event)"
/>
</div>
<div
v-if="formData.sizeType === 'range'"
class="form-field margin-bottom-xs"
>
<label class="form-label">Size Range</label>
<div class="range-inputs">
<InputText
:model-value="formData.startSize"
name="startSize"
type="number"
label="Start size"
@update:model-value="$emit('update:field', 'startSize', $event)"
/>
<span>to</span>
<InputText
:model-value="formData.endSize"
name="endSize"
type="number"
label="End size"
@update:model-value="$emit('update:field', 'endSize', $event)"
/>
</div>
</div>
</AccordionTab>
</Accordion>
</template>
<script setup>
import { Accordion, AccordionTab } from '@atomic-ui/accordion';
import InputText from '@atomic-ui/inputText';
import Radio from '@atomic-ui/radio';
import { computed } from 'vue';
import MultiSelectWithChips from '../../../../components/MultiSelectWithChips';
import {
DEVICE_TYPES,
PLATFORM_TYPES,
SIZE_TYPES,
} from '../../constants/targetConstants';
const props = defineProps({
formData: { type: Object, required: true },
});
defineEmits(['update:field']);
const accordionIndex = computed(() => {
const fd = props.formData;
const hasValues = fd.akamaiDevice?.length > 0
|| fd.platform?.length > 0
|| fd.sizeType
|| fd.size
|| fd.startSize
|| fd.endSize;
return hasValues ? 0 : null;
});
</script>
<style scoped lang="scss">
@import './_target-form-styles.scss';
</style>
|