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 | 4x 4x 4x 4x 4x 4x 4x | <template>
<Accordion
class="form-accordion margin-bottom-s"
:active-index="accordionIndex"
>
<AccordionTab header="TARGET COOKIES">
<div class="section-header">
<Button
variant="secondary"
size="small"
class="add-cookie-button"
@click="$emit('add-cookie')"
>
<Icon
:icon="csgAdd"
theme="dark"
size="m"
/>
Add Cookie
</Button>
</div>
<div
v-for="(cookie, index) in safeTargetCookies"
:key="`cookie-${index}`"
class="cookie-card"
>
<div class="card-header">
<span class="card-title">Cookie #{{ index + 1 }}</span>
<Button
variant="secondary"
size="small"
class="remove-btn"
aria-label="Remove Cookie"
@click="$emit('remove-cookie', index)"
>
Remove
</Button>
</div>
<div class="cookie-fields">
<div class="form-field">
<label class="form-label">Name</label>
<InputText
v-model="cookie.name"
name="cookieName"
label="Cookie name"
/>
</div>
<div class="form-field">
<label class="form-label">Value</label>
<InputText
v-model="cookie.value"
name="cookieValue"
label="Cookie value"
/>
</div>
<div class="form-field">
<label class="form-label">Operator</label>
<Dropdown
v-model="cookie.operator"
name="cookieOperator"
label=""
:options="operatorOptions"
/>
</div>
</div>
</div>
<div
v-if="validationErrors.targetCookies"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.targetCookies }}</span>
</div>
</AccordionTab>
</Accordion>
</template>
<script setup>
import { Accordion, AccordionTab } from '@atomic-ui/accordion';
import Button from '@atomic-ui/button';
import Dropdown from '@atomic-ui/dropdown';
import Icon from '@atomic-ui/icon';
import InputText from '@atomic-ui/inputText';
import { csgAdd, csgErrorRed } from '@csgSvgIcons/icons';
import { computed } from 'vue';
const props = defineProps({
formData: { type: Object, required: true },
validationErrors: { type: Object, required: true },
operatorOptions: { type: Array, required: true },
});
defineEmits(['add-cookie', 'remove-cookie']);
const safeTargetCookies = computed(() => props.formData.targetCookies || []);
const accordionIndex = computed(() => {
const hasValues = props.formData.targetCookies?.some((c) => c.name || c.value);
return hasValues ? 0 : null;
});
</script>
<style scoped lang="scss">
@import './_target-form-styles.scss';
</style>
|