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 | 4x 4x 4x 4x 4x | <template>
<Accordion
class="form-accordion margin-bottom-s"
:active-index="accordionIndex"
>
<AccordionTab header="USER ATTRIBUTES">
<div
v-for="(attrKey, index) in USER_ATTRIBUTE_KEYS"
:key="attrKey.key"
class="attribute-row margin-bottom-s"
>
<div class="attribute-fields">
<div class="form-field">
<InputText
:model-value="attrKey.displayName"
:name="`userAttributes.${index}.key`"
disabled
class="attribute-key-field"
/>
</div>
<div class="form-field">
<Dropdown
v-model="safeUserAttributes[index].operator"
:options="operatorOptions"
:name="`userAttributes.${index}.operator`"
label=""
aria-label="Operator"
:required="false"
:disabled-option="true"
disabled-message="Select"
/>
</div>
<div class="form-field">
<InputText
v-model="safeUserAttributes[index].value"
:name="`userAttributes.${index}.value`"
label="Enter value"
/>
</div>
</div>
</div>
</AccordionTab>
</Accordion>
</template>
<script setup>
import { Accordion, AccordionTab } from '@atomic-ui/accordion';
import Dropdown from '@atomic-ui/dropdown';
import InputText from '@atomic-ui/inputText';
import { computed } from 'vue';
import { USER_ATTRIBUTE_KEYS } from '../../constants/targetConstants';
const props = defineProps({
formData: { type: Object, required: true },
operatorOptions: { type: Array, required: true },
});
const safeUserAttributes = computed(() => props.formData.userAttributes || []);
const accordionIndex = computed(() => {
const hasValues = props.formData.userAttributes?.some(
(a) => a.operator && a.value,
);
return hasValues ? 0 : null;
});
</script>
<style scoped lang="scss">
@import './_target-form-styles.scss';
</style>
|